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,9 +1,17 @@
 <template>
-  <div>
+  <div
+    class="videoLayout"
+    :class="{
+      isLoading,
+      useTheatreMode
+    }"
+  >
     <ft-loader
       v-if="isLoading"
       :fullscreen="true"
     />
+    <div class="videoArea">
+      <div class="videoAreaMargin">
         <ft-video-player
           v-if="!isLoading && !hidePlayer"
           :dash-src="dashSrc"
@@ -18,6 +26,9 @@
           @ended="handleVideoEnded"
           @error="handleVideoError"
         />
+      </div>
+    </div>
+    <div class="infoArea">
       <watch-video-info
         v-if="!isLoading"
         :id="videoId"
@@ -48,6 +59,8 @@
         class="watchVideo"
         :class="{ theatreWatchVideo: useTheatreMode }"
       />
+    </div>
+    <div class="sidebarArea">
       <watch-video-live-chat
         v-if="!isLoading && isLive"
         :video-id="videoId"
@@ -75,7 +88,8 @@
         }"
       />
     </div>
+  </div>
 </template>
 
 <script src="./Watch.js" />
-<style scoped src="./Watch.css" />
+<style scoped src="./Watch.sass" lang="sass" />