From 2a36bcddf348479adeaebed1ebc6ecd5314b5878 Mon Sep 17 00:00:00 2001
From: Danny August Ramaputra <daystram@gmail.com>
Date: Sat, 6 Feb 2021 19:34:43 +1000
Subject: [PATCH 1/6] refactor: author cast list hides unlisted

---
 cast-be/controller/v1/video.go |  2 +-
 cast-be/handlers/init.go       |  2 +-
 cast-be/handlers/user.go       |  2 +-
 cast-be/handlers/video.go      |  4 ++--
 cast-be/models/video.go        | 16 ++++++++++------
 5 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/cast-be/controller/v1/video.go b/cast-be/controller/v1/video.go
index b5d20c1..89b8d5a 100644
--- a/cast-be/controller/v1/video.go
+++ b/cast-be/controller/v1/video.go
@@ -33,7 +33,7 @@ func (c *VideoController) GetList(variant, author string, count, offset int) dat
 	if author == "" {
 		videos, err = c.Handler.CastList(variant, count, offset)
 	} else {
-		videos, err = c.Handler.AuthorList(author, count, offset)
+		videos, err = c.Handler.AuthorList(author, false, count, offset)
 	}
 	if err != nil {
 		fmt.Printf("[VideoController::GetList] failed retrieving video list. %+v\n", err)
diff --git a/cast-be/handlers/init.go b/cast-be/handlers/init.go
index 0f3f29e..6eaca93 100644
--- a/cast-be/handlers/init.go
+++ b/cast-be/handlers/init.go
@@ -71,7 +71,7 @@ type Handler interface {
 	UserDetails(userID string) (detail data.UserDetail, err error)
 
 	CastList(variant string, count, offset int, userID ...string) (videos []data.Video, err error)
-	AuthorList(author string, count, offset int) (videos []data.Video, err error)
+	AuthorList(author string, withUnlisted bool, count, offset int) (videos []data.Video, err error)
 	SearchVideo(query string, tags []string, count, offset int) (videos []data.Video, err error)
 	VideoDetails(hash string) (video data.Video, err error)
 	CreateVOD(upload data.VideoUpload, controller beego.Controller, userID string) (ID primitive.ObjectID, err error)
diff --git a/cast-be/handlers/user.go b/cast-be/handlers/user.go
index c8ebae5..75b8730 100644
--- a/cast-be/handlers/user.go
+++ b/cast-be/handlers/user.go
@@ -15,7 +15,7 @@ func (m *module) UserDetails(userID string) (detail data.UserDetail, err error)
 	if user, err = m.db.userOrm.GetOneByID(userID); err != nil {
 		return data.UserDetail{}, errors.New(fmt.Sprintf("[UserDetails] user not found. %+v\n", err))
 	}
-	if videos, err = m.db.videoOrm.GetAllVODByAuthor(userID); err != nil {
+	if videos, err = m.db.videoOrm.GetAllVODByAuthor(userID, true); err != nil {
 		return data.UserDetail{}, errors.New(fmt.Sprintf("[UserDetails] cannot retrieve all user videos. %+v\n", err))
 	}
 	if subscriberCount, err = m.db.subscriptionOrm.GetCountByAuthorID(user.ID); err != nil {
diff --git a/cast-be/handlers/video.go b/cast-be/handlers/video.go
index d1f28bb..9970cfa 100644
--- a/cast-be/handlers/video.go
+++ b/cast-be/handlers/video.go
@@ -49,12 +49,12 @@ func (m *module) CastList(variant string, count int, offset int, userID ...strin
 	}
 	return
 }
-func (m *module) AuthorList(username string, count, offset int) (videos []data.Video, err error) {
+func (m *module) AuthorList(username string, withUnlisted bool, count, offset int) (videos []data.Video, err error) {
 	var author data.User
 	if author, err = m.db.userOrm.GetOneByUsername(username); err != nil {
 		return nil, errors.New(fmt.Sprintf("[AuthorList] author not found. %+v", err))
 	}
-	if videos, err = m.db.videoOrm.GetAllVODByAuthorPaginated(author.ID, count, offset); err != nil {
+	if videos, err = m.db.videoOrm.GetAllVODByAuthorPaginated(author.ID, withUnlisted, count, offset); err != nil {
 		return nil, errors.New(fmt.Sprintf("[AuthorList] error retrieving VODs. %+v", err))
 	}
 	return
diff --git a/cast-be/models/video.go b/cast-be/models/video.go
index c9df857..9443e37 100644
--- a/cast-be/models/video.go
+++ b/cast-be/models/video.go
@@ -20,8 +20,8 @@ type VideoOrmer interface {
 	GetTrending(count int, offset int) (videos []datatransfers.Video, err error)
 	GetLiked(userID string, count int, offset int) (videos []datatransfers.Video, err error)
 	GetSubscribed(userID string, count int, offset int) (videos []datatransfers.Video, err error)
-	GetAllVODByAuthor(author string) (videos []datatransfers.Video, err error)
-	GetAllVODByAuthorPaginated(author string, count int, offset int) (videos []datatransfers.Video, err error)
+	GetAllVODByAuthor(author string, withUnlisted bool) (videos []datatransfers.Video, err error)
+	GetAllVODByAuthorPaginated(author string, withUnlisted bool, count int, offset int) (videos []datatransfers.Video, err error)
 	Search(query string, count, offset int) (videos []datatransfers.Video, err error)
 	GetLiveByAuthor(userID string) (datatransfers.Video, error)
 	GetOneByHash(hash string) (datatransfers.Video, error)
@@ -187,7 +187,7 @@ func (o *videoOrm) GetTrending(count int, offset int) (result []datatransfers.Vi
 	return
 }
 
-func (o *videoOrm) GetAllVODByAuthor(author string) (videos []datatransfers.Video, err error) {
+func (o *videoOrm) GetAllVODByAuthor(author string, withUnlisted bool) (videos []datatransfers.Video, err error) {
 	query := &mongo.Cursor{}
 	if query, err = o.collection.Aggregate(context.Background(), mongo.Pipeline{ // unlisted VODs included
 		{{"$match", bson.D{{"author", author}}}},
@@ -207,12 +207,14 @@ func (o *videoOrm) GetAllVODByAuthor(author string) (videos []datatransfers.Vide
 		if err = query.Decode(&video); err != nil {
 			return
 		}
-		videos = append(videos, video)
+		if withUnlisted || !video.Unlisted {
+			videos = append(videos, video)
+		}
 	}
 	return
 }
 
-func (o *videoOrm) GetAllVODByAuthorPaginated(author string, count int, offset int) (videos []datatransfers.Video, err error) {
+func (o *videoOrm) GetAllVODByAuthorPaginated(author string, withUnlisted bool, count int, offset int) (videos []datatransfers.Video, err error) {
 	query := &mongo.Cursor{}
 	if query, err = o.collection.Aggregate(context.Background(), mongo.Pipeline{ // unlisted VODs included
 		{{"$match", bson.D{{"author", author}}}},
@@ -244,7 +246,9 @@ func (o *videoOrm) GetAllVODByAuthorPaginated(author string, count int, offset i
 		if err = query.Decode(&video); err != nil {
 			return
 		}
-		videos = append(videos, video)
+		if withUnlisted || !video.Unlisted {
+			videos = append(videos, video)
+		}
 	}
 	return
 }

From 77d7a76a687eaf05b1d76e09f272002b6dbfd403 Mon Sep 17 00:00:00 2001
From: Danny August Ramaputra <daystram@gmail.com>
Date: Sat, 6 Feb 2021 19:48:49 +1000
Subject: [PATCH 2/6] feat: added protected endpoint for owned cast list

---
 cast-be/controller/v1/video.go                  | 12 +++++++++++-
 cast-be/handlers/init.go                        |  1 +
 cast-be/handlers/user.go                        |  7 +++++++
 cast-be/routers/commentsRouter_controller_v1.go |  1 +
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/cast-be/controller/v1/video.go b/cast-be/controller/v1/video.go
index 89b8d5a..0ab6cb3 100644
--- a/cast-be/controller/v1/video.go
+++ b/cast-be/controller/v1/video.go
@@ -91,13 +91,23 @@ func (c *VideoControllerAuth) Prepare() {
 // @Title Get List
 // @Success 200 {object} models.Object
 // @Param   variant		query	string	false	"variant"
+// @Param   author		query	string	false	"author"
 // @Param   count		query   int 	false 8	"count"
 // @Param   offset		query   int 	false 0	"offset"
 // @router /list [get]
-func (c *VideoControllerAuth) GetList(variant string, count, offset int) datatransfers.Response {
+func (c *VideoControllerAuth) GetList(variant, author string, count, offset int) datatransfers.Response {
 	var videos []datatransfers.Video
 	var err error
 	videos, err = c.Handler.CastList(variant, count, offset, c.userID)
+	if author == "" {
+		videos, err = c.Handler.CastList(variant, count, offset)
+	} else {
+		// var user datatransfers.User
+		if _, err = c.Handler.UserGetOneByID(c.userID); err != nil {
+			return datatransfers.Response{Error: "Failed retrieving user info", Code: http.StatusInternalServerError}
+		}
+		// videos, err = c.Handler.AuthorList(author, author == user.Username, count, offset)
+	}
 	if err != nil {
 		fmt.Printf("[VideoControllerAuth::GetList] failed retrieving video list. %+v\n", err)
 		return datatransfers.Response{Error: "Failed retrieving video list", Code: http.StatusInternalServerError}
diff --git a/cast-be/handlers/init.go b/cast-be/handlers/init.go
index 6eaca93..2bce829 100644
--- a/cast-be/handlers/init.go
+++ b/cast-be/handlers/init.go
@@ -69,6 +69,7 @@ type Handler interface {
 	Register(idToken data.UserRegister) (err error)
 
 	UserDetails(userID string) (detail data.UserDetail, err error)
+	UserGetOneByID(userID string) (user data.User, err error)
 
 	CastList(variant string, count, offset int, userID ...string) (videos []data.Video, err error)
 	AuthorList(author string, withUnlisted bool, count, offset int) (videos []data.Video, err error)
diff --git a/cast-be/handlers/user.go b/cast-be/handlers/user.go
index 75b8730..b4905c3 100644
--- a/cast-be/handlers/user.go
+++ b/cast-be/handlers/user.go
@@ -34,3 +34,10 @@ func (m *module) UserDetails(userID string) (detail data.UserDetail, err error)
 	}
 	return
 }
+
+func (m *module) UserGetOneByID(userID string) (user data.User, err error) {
+	if user, err = m.db.userOrm.GetOneByID(userID); err != nil {
+		return data.User{}, fmt.Errorf("[UserGetOneByID] user not found. %+v\n", err)
+	}
+	return
+}
diff --git a/cast-be/routers/commentsRouter_controller_v1.go b/cast-be/routers/commentsRouter_controller_v1.go
index d344f80..41c6ca6 100644
--- a/cast-be/routers/commentsRouter_controller_v1.go
+++ b/cast-be/routers/commentsRouter_controller_v1.go
@@ -172,6 +172,7 @@ func init() {
             AllowHTTPMethods: []string{"get"},
             MethodParams: param.Make(
 				param.New("variant"),
+				param.New("author"),
 				param.New("count", param.Default("false")),
 				param.New("offset", param.Default("false")),
 			),

From f19c8e3e8c8813cf53703c78704e6bbe4416ed02 Mon Sep 17 00:00:00 2001
From: Danny August Ramaputra <daystram@gmail.com>
Date: Sat, 6 Feb 2021 19:49:27 +1000
Subject: [PATCH 3/6] chore: improved styling

---
 cast-fe/src/views/Scene.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cast-fe/src/views/Scene.jsx b/cast-fe/src/views/Scene.jsx
index e3bbf3c..c1f1776 100644
--- a/cast-fe/src/views/Scene.jsx
+++ b/cast-fe/src/views/Scene.jsx
@@ -448,7 +448,7 @@ class Scene extends Component {
                   </Col>
                 </Row>
                 <hr />
-                <h3>Comments</h3>
+                <h3 style={{ fontFamily: "Comfortaa" }}>Comments</h3>
                 <Row
                   className="justify-content-center"
                   noGutters

From 421fa5a9fbcea8b81e3a86f486cc93d1e712c2a1 Mon Sep 17 00:00:00 2001
From: Danny August Ramaputra <daystram@gmail.com>
Date: Sat, 6 Feb 2021 19:49:45 +1000
Subject: [PATCH 4/6] feat: used protected endpoint for owned cast list

---
 cast-fe/src/views/Manage.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/cast-fe/src/views/Manage.jsx b/cast-fe/src/views/Manage.jsx
index 8c0dceb..523b984 100644
--- a/cast-fe/src/views/Manage.jsx
+++ b/cast-fe/src/views/Manage.jsx
@@ -68,9 +68,9 @@ class Manage extends Component {
 
   fetchVideos() {
     api.cast
-      .list({
+      .listCurated({
         author: authManager.getUser().preferred_username,
-        count: 8,
+        count: 512,
         offset: 0,
       })
       .then((response) => {
@@ -482,7 +482,7 @@ class Manage extends Component {
                       </Row>
                     ))
                   ) : (
-                    <h5 style={style.h5}>No videos uploaded yet!</h5>
+                    <h5 style={style.h5}>No casts uploaded yet!</h5>
                   ))}
                 {this.state.loading && (
                   <Spinner

From 7fe1a8e8e70cb0e5c9c4441a809088f2da903355 Mon Sep 17 00:00:00 2001
From: Danny August Ramaputra <daystram@gmail.com>
Date: Sat, 6 Feb 2021 19:59:54 +1000
Subject: [PATCH 5/6] feat: added unlisted tag

---
 cast-fe/src/components/Cast.jsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/cast-fe/src/components/Cast.jsx b/cast-fe/src/components/Cast.jsx
index 78934e0..7e61e2d 100644
--- a/cast-fe/src/components/Cast.jsx
+++ b/cast-fe/src/components/Cast.jsx
@@ -33,7 +33,12 @@ function Cast(props) {
             LIVE
           </Badge>
         )}
-        <Badge pill style={style.cast_viewer_tag}>
+        {props.video.unlisted && (
+          <Badge pill style={{ ...style.cast_tag, ...style.cast_tag_unlisted }}>
+            <i className="fas fa-lock" /> Unlisted
+          </Badge>
+        )}
+        <Badge pill style={style.cast_tag}>
           {abbreviate().number(props.video.views)}{" "}
           {props.video.type === "live" ? "viewers" : "views"}
         </Badge>
@@ -94,7 +99,7 @@ let style = {
     fontSize: 16,
     fontWeight: 400,
   },
-  cast_viewer_tag: {
+  cast_tag: {
     background: "#8B2803AA",
     color: "#DDD",
     borderRadius: 8,
@@ -106,6 +111,9 @@ let style = {
     marginRight: 8,
     marginBottom: 8,
   },
+  cast_tag_unlisted: {
+    background: "rgb(3,69,139)",
+  },
   cast_detail: {
     display: "flex",
   },

From 27ccbb6eef611ded4c8dd6ae161345b42f9e0343 Mon Sep 17 00:00:00 2001
From: Danny August Ramaputra <daystram@gmail.com>
Date: Sat, 6 Feb 2021 20:00:29 +1000
Subject: [PATCH 6/6] refactor: improved unavailable cast error response

---
 cast-fe/src/views/Scene.jsx | 575 +++++++++++++++++++-----------------
 1 file changed, 303 insertions(+), 272 deletions(-)

diff --git a/cast-fe/src/views/Scene.jsx b/cast-fe/src/views/Scene.jsx
index c1f1776..5988a21 100644
--- a/cast-fe/src/views/Scene.jsx
+++ b/cast-fe/src/views/Scene.jsx
@@ -52,6 +52,7 @@ class Scene extends Component {
       comments: [],
       error_comment: "",
       not_found: false,
+      not_loadable: false,
     };
     this.handleDownload = this.handleDownload.bind(this);
     this.handleShare = this.handleShare.bind(this);
@@ -160,7 +161,10 @@ class Scene extends Component {
       })
       .catch((error) => {
         console.log(error);
-        this.setState({ loading: { ...this.state.loading, current: false } });
+        this.setState({
+          not_loadable: true,
+          loading: { ...this.state.loading, current: false },
+        });
       });
   }
 
@@ -289,298 +293,325 @@ class Scene extends Component {
     if (this.state.loading.live) return <></>;
     return (
       <>
-        {!this.state.not_found && !this.state.offline && (
-          <Container fluid style={style.content_container}>
-            <Row>
-              <Col
-                xl={{ span: 2, order: 1 }}
-                sm={{ span: 6, order: 2 }}
-                xs={{ span: 12, order: 2 }}
-              >
-                <MediaQuery minDeviceWidth={MOBILE_BP}>
-                  <Card body style={{ borderRadius: "8px 48px 8px 8px" }}>
-                    <Sidebar />
-                  </Card>
-                </MediaQuery>
-                <div style={style.cast_list}>
-                  {this.state.live &&
-                    Object.values(this.state.live).map((video) => (
-                      <Row
-                        key={video.hash}
-                        noGutters
-                        style={{ padding: "0 0 16px 0" }}
-                      >
-                        <Cast
-                          video={video}
-                          onClick={(a, b) => this.incrementView(a, b)}
-                        />
-                      </Row>
-                    ))}
-                  {this.state.loading.live && (
-                    <Spinner
-                      style={style.spinner}
-                      animation="grow"
-                      variant="primary"
-                    />
-                  )}
-                </div>
-              </Col>
-              <Col
-                xl={{ span: 8, order: 2 }}
-                sm={{ span: 12, order: 1 }}
-                xs={{ span: 12, order: 1 }}
-                className={"mid-container"}
-              >
-                <HybridPlayer
-                  url={
-                    this.state.video?.type === VIDEO_TYPE_LIVE
-                      ? api.live.stream(this.state.video?.hash)
-                      : api.cdn.vod(this.state.video?.hash)
-                  }
-                  thumbnail={
-                    this.state.video &&
-                    api.cdn.thumbnail(this.state.video?.hash)
-                  }
-                  live={this.state.video?.type === VIDEO_TYPE_LIVE}
-                />
-                <Row noGutters style={style.cast_tag_bar}>
-                  <Col md={true}>
-                    {this.state.video?.unlisted && (
-                      <Badge
-                        pill
-                        style={{
-                          ...style.cast_tag,
-                          ...style.cast_tag_unlisted,
-                        }}
-                      >
-                        <i className="fas fa-lock" /> Unlisted
-                      </Badge>
+        {!this.state.not_found &&
+          !this.state.not_loadable &&
+          !this.state.offline && (
+            <Container fluid style={style.content_container}>
+              <Row>
+                <Col
+                  xl={{ span: 2, order: 1 }}
+                  sm={{ span: 6, order: 2 }}
+                  xs={{ span: 12, order: 2 }}
+                >
+                  <MediaQuery minDeviceWidth={MOBILE_BP}>
+                    <Card body style={{ borderRadius: "8px 48px 8px 8px" }}>
+                      <Sidebar />
+                    </Card>
+                  </MediaQuery>
+                  <div style={style.cast_list}>
+                    {this.state.live &&
+                      Object.values(this.state.live).map((video) => (
+                        <Row
+                          key={video.hash}
+                          noGutters
+                          style={{ padding: "0 0 16px 0" }}
+                        >
+                          <Cast
+                            video={video}
+                            onClick={(a, b) => this.incrementView(a, b)}
+                          />
+                        </Row>
+                      ))}
+                    {this.state.loading.live && (
+                      <Spinner
+                        style={style.spinner}
+                        animation="grow"
+                        variant="primary"
+                      />
                     )}
-                    {this.state.video?.tags &&
-                      Object.values(this.state.video?.tags).map((tag) => (
-                        <Badge pill key={tag} style={style.cast_tag}>
-                          {tag}
+                  </div>
+                </Col>
+                <Col
+                  xl={{ span: 8, order: 2 }}
+                  sm={{ span: 12, order: 1 }}
+                  xs={{ span: 12, order: 1 }}
+                  className={"mid-container"}
+                >
+                  <HybridPlayer
+                    url={
+                      this.state.video?.type === VIDEO_TYPE_LIVE
+                        ? api.live.stream(this.state.video?.hash)
+                        : api.cdn.vod(this.state.video?.hash)
+                    }
+                    thumbnail={
+                      this.state.video &&
+                      api.cdn.thumbnail(this.state.video?.hash)
+                    }
+                    live={this.state.video?.type === VIDEO_TYPE_LIVE}
+                  />
+                  <Row noGutters style={style.cast_tag_bar}>
+                    <Col md={true}>
+                      {this.state.video?.unlisted && (
+                        <Badge
+                          pill
+                          style={{
+                            ...style.cast_tag,
+                            ...style.cast_tag_unlisted,
+                          }}
+                        >
+                          <i className="fas fa-lock" /> Unlisted
                         </Badge>
-                      ))}
-                  </Col>
-                  <Col
-                    md={true}
-                    style={{ display: "flex", justifyContent: "flex-end" }}
-                  >
-                    {this.state.video?.type === VIDEO_TYPE_VOD && (
+                      )}
+                      {this.state.video?.tags &&
+                        Object.values(this.state.video?.tags).map((tag) => (
+                          <Badge pill key={tag} style={style.cast_tag}>
+                            {tag}
+                          </Badge>
+                        ))}
+                    </Col>
+                    <Col
+                      md={true}
+                      style={{ display: "flex", justifyContent: "flex-end" }}
+                    >
+                      {this.state.video?.type === VIDEO_TYPE_VOD && (
+                        <span
+                          style={{ ...style.cast_attrib, ...style.clickable }}
+                          onClick={this.handleDownload}
+                        >
+                          <i className="material-icons">get_app</i> download
+                        </span>
+                      )}
                       <span
                         style={{ ...style.cast_attrib, ...style.clickable }}
-                        onClick={this.handleDownload}
+                        onClick={this.handleShare}
                       >
-                        <i className="material-icons">get_app</i> download
+                        <i className="material-icons">share</i> share
                       </span>
-                    )}
-                    <span
-                      style={{ ...style.cast_attrib, ...style.clickable }}
-                      onClick={this.handleShare}
-                    >
-                      <i className="material-icons">share</i> share
-                    </span>
-                    <span
-                      style={{ ...style.cast_attrib, ...style.clickable }}
-                      onClick={this.handleLike}
-                    >
-                      <i
-                        style={this.state.liked ? style.liked : {}}
-                        className="material-icons"
+                      <span
+                        style={{ ...style.cast_attrib, ...style.clickable }}
+                        onClick={this.handleLike}
                       >
-                        thumb_up
-                      </i>{" "}
-                      {`${abbreviate().number(this.state.likes) || 0} like${
-                        this.state.likes === 1 ? "" : "s"
-                      }`}
-                    </span>
-                    <span style={style.cast_attrib}>
-                      <i className="material-icons">remove_red_eye</i>{" "}
-                      {abbreviate().number(this.state.video?.views) || 0}{" "}
-                      {this.state.video?.type === VIDEO_TYPE_LIVE
-                        ? "viewers"
-                        : "views"}
-                    </span>
-                  </Col>
-                </Row>
-                <h1 style={style.title}>{this.state.video?.title}</h1>
-                <p style={{ marginTop: 4 }}>
-                  {format().date(this.state.video?.created_at)}
-                </p>
-                <div style={style.author_bar}>
-                  <div style={style.author_profile}>
-                    <ProfileImage
-                      size={42}
-                      name={this.state.video?.author.name}
-                      style={style.profile_image}
-                    />
-                    <div style={style.cast_author_details}>
-                      <p style={style.cast_author_name}>
-                        {this.state.video?.author.name}
-                      </p>
-                      <p style={style.cast_author_sub}>
-                        {abbreviate().number(
-                          this.state.video?.author.subscribers
-                        ) || 0}{" "}
-                        subscriber
-                        {this.state.video?.author.subscribers !== 1 && "s"}
-                      </p>
+                        <i
+                          style={this.state.liked ? style.liked : {}}
+                          className="material-icons"
+                        >
+                          thumb_up
+                        </i>{" "}
+                        {`${abbreviate().number(this.state.likes) || 0} like${
+                          this.state.likes === 1 ? "" : "s"
+                        }`}
+                      </span>
+                      <span style={style.cast_attrib}>
+                        <i className="material-icons">remove_red_eye</i>{" "}
+                        {abbreviate().number(this.state.video?.views) || 0}{" "}
+                        {this.state.video?.type === VIDEO_TYPE_LIVE
+                          ? "viewers"
+                          : "views"}
+                      </span>
+                    </Col>
+                  </Row>
+                  <h1 style={style.title}>{this.state.video?.title}</h1>
+                  <p style={{ marginTop: 4 }}>
+                    {format().date(this.state.video?.created_at)}
+                  </p>
+                  <div style={style.author_bar}>
+                    <div style={style.author_profile}>
+                      <ProfileImage
+                        size={42}
+                        name={this.state.video?.author.name}
+                        style={style.profile_image}
+                      />
+                      <div style={style.cast_author_details}>
+                        <p style={style.cast_author_name}>
+                          {this.state.video?.author.name}
+                        </p>
+                        <p style={style.cast_author_sub}>
+                          {abbreviate().number(
+                            this.state.video?.author.subscribers
+                          ) || 0}{" "}
+                          subscriber
+                          {this.state.video?.author.subscribers !== 1 && "s"}
+                        </p>
+                      </div>
                     </div>
-                  </div>
-                  <div>
-                    <Button
-                      style={style.sub_button}
-                      onClick={this.handleSubscribe}
-                      variant={
-                        this.state.subscribed ? "outline-primary" : "primary"
-                      }
-                    >
-                      {this.state.subscribed ? "SUBSCRIBED" : "SUBSCRIBE"}
-                    </Button>
-                  </div>
-                </div>
-                <Row className="justify-content-center" noGutters>
-                  <Col xl={10} xs={12}>
-                    <div style={style.description}>
-                      {this.state.video?.description}
+                    <div>
+                      <Button
+                        style={style.sub_button}
+                        onClick={this.handleSubscribe}
+                        variant={
+                          this.state.subscribed ? "outline-primary" : "primary"
+                        }
+                      >
+                        {this.state.subscribed ? "SUBSCRIBED" : "SUBSCRIBE"}
+                      </Button>
                     </div>
-                  </Col>
-                </Row>
-                <hr />
-                <h3 style={{ fontFamily: "Comfortaa" }}>Comments</h3>
-                <Row
-                  className="justify-content-center"
-                  noGutters
-                  style={{ marginTop: 28 }}
-                >
-                  <Col xl={10} xs={12}>
-                    <Form onSubmit={this.handleComment}>
-                      {this.state.error_submit && (
-                        <Alert variant={"danger"}>
-                          {this.state.error_submit}
-                        </Alert>
-                      )}
-                      <Form.Group>
-                        <InputGroup>
-                          <Form.Control
-                            type="text"
-                            placeholder="Comment"
-                            value={this.state.comment}
-                            onChange={this.writeComment}
-                            isInvalid={!!this.state.error_comment}
-                          />
-                          <InputGroup.Append>
-                            <Button
-                              variant="outline-primary"
-                              type="submit"
-                              style={{ borderRadius: "0px 4px 4px 0px" }}
-                            >
-                              <i className="material-icons">send</i>
-                            </Button>
-                          </InputGroup.Append>
-                          <Form.Control.Feedback type={"invalid"}>
-                            {this.state.error_comment}
-                          </Form.Control.Feedback>
-                        </InputGroup>
-                      </Form.Group>
-                    </Form>
-                    <div style={style.comment_list}>
-                      {this.state.comments ? (
-                        Object.values(this.state.comments).map((comment) => {
-                          return (
-                            <div
-                              key={comment.created_at}
-                              style={{
-                                ...style.author_profile,
-                                ...style.comment_item,
-                              }}
-                            >
-                              <ProfileImage
-                                size={42}
-                                name={comment.author.name}
-                                style={{
-                                  ...style.profile_image,
-                                  alignSelf: "flex-start",
-                                }}
-                              />
+                  </div>
+                  <Row className="justify-content-center" noGutters>
+                    <Col xl={10} xs={12}>
+                      <div style={style.description}>
+                        {this.state.video?.description}
+                      </div>
+                    </Col>
+                  </Row>
+                  <hr />
+                  <h3 style={{ fontFamily: "Comfortaa" }}>Comments</h3>
+                  <Row
+                    className="justify-content-center"
+                    noGutters
+                    style={{ marginTop: 28 }}
+                  >
+                    <Col xl={10} xs={12}>
+                      <Form onSubmit={this.handleComment}>
+                        {this.state.error_submit && (
+                          <Alert variant={"danger"}>
+                            {this.state.error_submit}
+                          </Alert>
+                        )}
+                        <Form.Group>
+                          <InputGroup>
+                            <Form.Control
+                              type="text"
+                              placeholder="Comment"
+                              value={this.state.comment}
+                              onChange={this.writeComment}
+                              isInvalid={!!this.state.error_comment}
+                            />
+                            <InputGroup.Append>
+                              <Button
+                                variant="outline-primary"
+                                type="submit"
+                                style={{ borderRadius: "0px 4px 4px 0px" }}
+                              >
+                                <i className="material-icons">send</i>
+                              </Button>
+                            </InputGroup.Append>
+                            <Form.Control.Feedback type={"invalid"}>
+                              {this.state.error_comment}
+                            </Form.Control.Feedback>
+                          </InputGroup>
+                        </Form.Group>
+                      </Form>
+                      <div style={style.comment_list}>
+                        {this.state.comments ? (
+                          Object.values(this.state.comments).map((comment) => {
+                            return (
                               <div
+                                key={comment.created_at}
                                 style={{
-                                  ...style.cast_author_details,
-                                  minWidth: 0,
+                                  ...style.author_profile,
+                                  ...style.comment_item,
                                 }}
                               >
-                                <p style={style.cast_author_name}>
-                                  {comment.author.name}
-                                </p>
-                                <p style={{ marginBottom: 0, color: "grey" }}>
-                                  <TimeAgo date={comment.created_at} />
-                                </p>
-                                <p
+                                <ProfileImage
+                                  size={42}
+                                  name={comment.author.name}
                                   style={{
-                                    ...style.cast_author_sub,
-                                    whiteSpace: "normal",
+                                    ...style.profile_image,
+                                    alignSelf: "flex-start",
+                                  }}
+                                />
+                                <div
+                                  style={{
+                                    ...style.cast_author_details,
+                                    minWidth: 0,
                                   }}
                                 >
-                                  {comment.content}
-                                </p>
+                                  <p style={style.cast_author_name}>
+                                    {comment.author.name}
+                                  </p>
+                                  <p style={{ marginBottom: 0, color: "grey" }}>
+                                    <TimeAgo date={comment.created_at} />
+                                  </p>
+                                  <p
+                                    style={{
+                                      ...style.cast_author_sub,
+                                      whiteSpace: "normal",
+                                    }}
+                                  >
+                                    {comment.content}
+                                  </p>
+                                </div>
                               </div>
-                            </div>
-                          );
-                        })
-                      ) : (
-                        <h5 style={style.h5}>Post the first comment!</h5>
-                      )}
-                    </div>
-                  </Col>
-                </Row>
-                <MediaQuery maxDeviceWidth={MOBILE_BP}>
-                  <hr />
-                </MediaQuery>
-              </Col>
-              <Col
-                xl={{ span: 2, order: 3 }}
-                sm={{ span: 6, order: 3 }}
-                xs={{ span: 12, order: 3 }}
-              >
-                <Chat
-                  height={480}
-                  embedded={true}
-                  hash={this.state.video?.hash}
-                  promptSignup={this.promptSignup}
-                />
-                <div style={style.cast_list}>
-                  {this.state.vod &&
-                    Object.values(this.state.vod).map((video) => (
-                      <Row
-                        key={video.hash}
-                        noGutters
-                        style={{ padding: "0 0 16px 0" }}
-                      >
-                        <Cast
-                          video={video}
-                          onClick={(a, b) => this.incrementView(a, b)}
-                        />
-                      </Row>
-                    ))}
-                  {this.state.loading.vod && (
-                    <Spinner
-                      style={style.spinner}
-                      animation="grow"
-                      variant="primary"
-                    />
-                  )}
-                </div>
-              </Col>
-            </Row>
-          </Container>
-        )}
+                            );
+                          })
+                        ) : (
+                          <h5 style={style.h5}>Post the first comment!</h5>
+                        )}
+                      </div>
+                    </Col>
+                  </Row>
+                  <MediaQuery maxDeviceWidth={MOBILE_BP}>
+                    <hr />
+                  </MediaQuery>
+                </Col>
+                <Col
+                  xl={{ span: 2, order: 3 }}
+                  sm={{ span: 6, order: 3 }}
+                  xs={{ span: 12, order: 3 }}
+                >
+                  <Chat
+                    height={480}
+                    embedded={true}
+                    hash={this.state.video?.hash}
+                    promptSignup={this.promptSignup}
+                  />
+                  <div style={style.cast_list}>
+                    {this.state.vod &&
+                      Object.values(this.state.vod).map((video) => (
+                        <Row
+                          key={video.hash}
+                          noGutters
+                          style={{ padding: "0 0 16px 0" }}
+                        >
+                          <Cast
+                            video={video}
+                            onClick={(a, b) => this.incrementView(a, b)}
+                          />
+                        </Row>
+                      ))}
+                    {this.state.loading.vod && (
+                      <Spinner
+                        style={style.spinner}
+                        animation="grow"
+                        variant="primary"
+                      />
+                    )}
+                  </div>
+                </Col>
+              </Row>
+            </Container>
+          )}
         {this.state.not_found && (
           <>
             <img
               src={logo}
               height={"120"}
-              alt={"Video Unavailable"}
+              alt={"Cast Not Found"}
+              style={{
+                display: "block",
+                margin: "auto",
+                opacity: 0.25,
+                marginTop: "25vh",
+              }}
+            />
+            <h1
+              style={{
+                fontFamily: "Comfortaa",
+                textAlign: "center",
+                marginTop: 18,
+                opacity: 0.85,
+              }}
+            >
+              Cast Not Found
+            </h1>
+          </>
+        )}
+        {this.state.not_loadable && (
+          <>
+            <img
+              src={logo}
+              height={"120"}
+              alt={"Currently Unavailable"}
               style={{
                 display: "block",
                 margin: "auto",
@@ -596,7 +627,7 @@ class Scene extends Component {
                 opacity: 0.85,
               }}
             >
-              Video Unavailable
+              Currently Unavailable
             </h1>
           </>
         )}