Redesign watch component

src/renderer/components/ft-video-player/ft-video-player.css

@@ -1,9 +1,7 @@
 .relative {
   position: relative;
-  width: 85%;
 }
 
 .ftVideoPlayer {
-  width: 85%;
   max-height: 50vh;
 }

src/renderer/views/Watch/Watch.css

@@ -1,123 +0,0 @@
-.watchVideo {
-  width: 65%;
-  float: left;
-  margin-top: 0px;
-  margin-bottom: 10px;
-}
-
-.theatreWatchVideo {
-  float: none;
-  margin: 0 auto;
-  width: 85%;
-  margin-bottom: 10px;
-}
-
-.videoPlayer {
-  width: calc(65% + 30px);
-  float: left;
-  margin-top: 0px;
-  margin-left: 10px;
-  margin-bottom: 10px;
-}
-
-.theatrePlayer {
-  width: 100%;
-  float: none;
-  margin: 0 auto;
-  margin-bottom: 10px;
-}
-
-.watchVideoSideBar {
-  width: 27%;
-  max-width: 425px;
-  float: right;
-  margin-bottom: 10px;
-  position: absolute;
-}
-
-.watchVideoPlaylist {
-  right: 10px;
-  top: 70px;
-  height: 500px;
-}
-
-.theatrePlaylist {
-  float: none;
-  margin: 0 auto;
-  width: 85%;
-  height: 500px;
-  margin-bottom: 10px;
-  max-width: none;
-  position: static;
-}
-
-.watchVideoRecommendations {
-  right: 10px;
-}
-
-.watchVideoRecommendationsNoCard {
-  top: 70px;
-}
-
-.watchVideoRecommendationsLowerCard {
-  top: 600px;
-}
-
-.theatreRecommendations {
-  float: none;
-  margin: 0 auto;
-  width: 85%;
-  max-width: none;
-  position: static;
-}
-
-@media only screen and (max-width: 1500px) {
-  .watchVideo {
-    width: 63%;
-  }
-
-  .videoPlayer {
-    width: calc(63% + 30px);
-  }
-
-  .theatreWatchVideo {
-    width: 85%;
-  }
-
-  .theatrePlayer {
-    width: calc(85% + 30px);
-  }
-}
-
-@media only screen and (max-width: 1350px) {
-  .watchVideo {
-    float: none;
-    margin: 0 auto;
-    width: 85%;
-    margin-bottom: 10px;
-  }
-
-  .videoPlayer {
-    float: none;
-    margin: 0 auto;
-    width: calc(85% + 30px);
-    margin-bottom: 10px;
-  }
-
-  .watchVideoPlaylist {
-    float: none;
-    margin: 0 auto;
-    margin-bottom: 10px;
-    width: 85%;
-    max-width: none;
-    position: static;
-  }
-
-  .watchVideoRecommendations {
-    float: none;
-    margin: 0 auto;
-    width: 85%;
-    max-width: none;
-    position: static;
-  }
-}

src/renderer/views/Watch/Watch.sass

@@ -0,0 +1,54 @@
+=dual-column-template
+  grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+
+=theatre-mode-template
+  grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
+
+=single-column-template
+  grid-template: "video" auto "info" auto "sidebar" auto / auto
+
+.videoLayout
+  display: grid
+  align-items: start
+  +dual-column-template
+
+  @media only screen and (max-width: 1350px)
+    +theatre-mode-template
+
+  @media only screen and (max-width: 900px)
+    +single-column-template
+
+  &.useTheatreMode
+    +theatre-mode-template
+
+  &.isLoading
+    +single-column-template
+
+  .videoArea
+    grid-area: video
+
+    .videoAreaMargin
+      margin: 0px 8px 16px
+
+    .videoPlayer
+      grid-column: 1
+      max-width: calc(80vh * 1.78)
+      margin: 0 auto
+
+  .watchVideo
+    margin: 0px 8px 16px
+    grid-column: 1
+
+  .infoArea
+    grid-area: info
+
+  .sidebarArea
+    grid-area: sidebar
+    min-width: 380px
+
+  .watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
+    height: 500px
+    margin: 0 8px 16px
+
+  .watchVideoRecommendations, .theatreRecommendations
+    margin: 0 8px 16px

src/renderer/views/Watch/Watch.vue

@@ -1,81 +1,95 @@
 <template>
-  <div>
+  <div
+    class="videoLayout"
+    :class="{
+      isLoading,
+      useTheatreMode
+    }"
+  >
     <ft-loader
       v-if="isLoading"
       :fullscreen="true"
     />
-    <ft-video-player
+    <div class="videoArea">
-      v-if="!isLoading && !hidePlayer"
+      <div class="videoAreaMargin">
-      :dash-src="dashSrc"
+        <ft-video-player
-      :source-list="activeSourceList"
+          v-if="!isLoading && !hidePlayer"
-      :caption-list="captionSourceList"
+          :dash-src="dashSrc"
-      :storyboard-src="videoStoryboardSrc"
+          :source-list="activeSourceList"
-      :format="activeFormat"
+          :caption-list="captionSourceList"
-      :thumbnail="thumbnail"
+          :storyboard-src="videoStoryboardSrc"
-      class="videoPlayer"
+          :format="activeFormat"
-      :class="{ theatrePlayer: useTheatreMode }"
+          :thumbnail="thumbnail"
-      ref="videoPlayer"
+          class="videoPlayer"
-      @ended="handleVideoEnded"
+          :class="{ theatrePlayer: useTheatreMode }"
-      @error="handleVideoError"
+          ref="videoPlayer"
-    />
+          @ended="handleVideoEnded"
-    <watch-video-info
+          @error="handleVideoError"
-      v-if="!isLoading"
+        />
-      :id="videoId"
+      </div>
-      :title="videoTitle"
+    </div>
-      :channel-id="channelId"
+    <div class="infoArea">
-      :channel-name="channelName"
+      <watch-video-info
-      :channel-thumbnail="channelThumbnail"
+        v-if="!isLoading"
-      :published="videoPublished"
+        :id="videoId"
-      :subscription-count-text="channelSubscriptionCountText"
+        :title="videoTitle"
-      :like-count="videoLikeCount"
+        :channel-id="channelId"
-      :dislike-count="videoDislikeCount"
+        :channel-name="channelName"
-      :view-count="videoViewCount"
+        :channel-thumbnail="channelThumbnail"
-      @theatreMode="toggleTheatreMode"
+        :published="videoPublished"
-      class="watchVideo"
+        :subscription-count-text="channelSubscriptionCountText"
-      :class="{ theatreWatchVideo: useTheatreMode }"
+        :like-count="videoLikeCount"
-    />
+        :dislike-count="videoDislikeCount"
-    <watch-video-description
+        :view-count="videoViewCount"
-      v-if="!isLoading"
+        @theatreMode="toggleTheatreMode"
-      :published="videoPublished"
+        class="watchVideo"
-      :description="videoDescription"
+        :class="{ theatreWatchVideo: useTheatreMode }"
-      :description-html="videoDescriptionHtml"
+      />
-      class="watchVideo"
+      <watch-video-description
-      :class="{ theatreWatchVideo: useTheatreMode }"
+        v-if="!isLoading"
-    />
+        :published="videoPublished"
-    <watch-video-comments
+        :description="videoDescription"
-      v-if="!isLoading && !isLive"
+        :description-html="videoDescriptionHtml"
-      :id="videoId"
+        class="watchVideo"
-      class="watchVideo"
+        :class="{ theatreWatchVideo: useTheatreMode }"
-      :class="{ theatreWatchVideo: useTheatreMode }"
+      />
-    />
+      <watch-video-comments
-    <watch-video-live-chat
+        v-if="!isLoading && !isLive"
-      v-if="!isLoading && isLive"
+        :id="videoId"
-      :video-id="videoId"
+        class="watchVideo"
-      :channel-name="channelName"
+        :class="{ theatreWatchVideo: useTheatreMode }"
-      class="watchVideoSideBar watchVideoPlaylist"
+      />
-      :class="{ theatrePlaylist: useTheatreMode }"
+    </div>
-    />
+    <div class="sidebarArea">
-    <watch-video-playlist
+      <watch-video-live-chat
-      v-if="watchingPlaylist"
+        v-if="!isLoading && isLive"
-      v-show="!isLoading"
+        :video-id="videoId"
-      :playlist-id="playlistId"
+        :channel-name="channelName"
-      :video-id="videoId"
+        class="watchVideoSideBar watchVideoPlaylist"
-      ref="watchVideoPlaylist"
+        :class="{ theatrePlaylist: useTheatreMode }"
-      class="watchVideoSideBar watchVideoPlaylist"
+      />
-      :class="{ theatrePlaylist: useTheatreMode }"
+      <watch-video-playlist
-    />
+        v-if="watchingPlaylist"
-    <watch-video-recommendations
+        v-show="!isLoading"
-      v-if="!isLoading"
+        :playlist-id="playlistId"
-      :data="recommendedVideos"
+        :video-id="videoId"
-      class="watchVideoSideBar watchVideoRecommendations"
+        ref="watchVideoPlaylist"
-      :class="{
+        class="watchVideoSideBar watchVideoPlaylist"
-        theatreRecommendations: useTheatreMode,
+        :class="{ theatrePlaylist: useTheatreMode }"
-        watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
+      />
-        watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
+      <watch-video-recommendations
-      }"
+        v-if="!isLoading"
-    />
+        :data="recommendedVideos"
+        class="watchVideoSideBar watchVideoRecommendations"
+        :class="{
+          theatreRecommendations: useTheatreMode,
+          watchVideoRecommendationsLowerCard: watchingPlaylist || isLive,
+          watchVideoRecommendationsNoCard: !watchingPlaylist || !isLive
+        }"
+      />
+    </div>
   </div>
 </template>
 
 <script src="./Watch.js" />
-<style scoped src="./Watch.css" />
+<style scoped src="./Watch.sass" lang="sass" />