Fix scrolling through the download dropdown (#2425)

* Fix scrolling through the download dropdown

* Fix lining issue

src/renderer/components/watch-video-info/watch-video-info.js

@@ -292,6 +292,18 @@ export default Vue.extend({
           }
         ]
       })
+
+      this.$watch('$refs.downloadButton.dropdownShown', (dropdownShown) => {
+        this.$parent.infoAreaSticky = !dropdownShown
+
+        if (dropdownShown && window.innerWidth >= 901) {
+          // adds a slight delay so we know that the dropdown has shown up
+          // and won't mess up our scrolling
+          Promise.resolve().then(() => {
+            this.$parent.$refs.infoArea.scrollIntoView()
+          })
+        }
+      })
     }
   },
   methods: {

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -95,6 +95,7 @@
         />
         <ft-icon-button
           v-if="!isUpcoming && downloadLinks.length > 0"
+          ref="downloadButton"
           :title="$t('Video.Download Video')"
           class="option"
           theme="secondary"

src/renderer/views/Watch/Watch.js

@@ -76,7 +76,8 @@ export default Vue.extend({
       timestamp: null,
       playNextTimeout: null,
       playNextCountDownIntervalId: null,
-      pictureInPictureButtonInverval: null
+      pictureInPictureButtonInverval: null,
+      infoAreaSticky: true
     }
   },
   computed: {

src/renderer/views/Watch/Watch.sass

@@ -68,7 +68,11 @@
     grid-area: info
     position: relative
 
-    @media only screen and (min-width: 901px)
+  @media only screen and (min-width: 901px)
+    .infoArea
+      scroll-margin-top: 76px
+
+    .infoAreaSticky
       position: sticky
       top: 76px
 

src/renderer/views/Watch/Watch.vue

@@ -64,7 +64,11 @@
         </div>
       </div>
     </div>
-    <div class="infoArea">
+    <div
+      ref="infoArea"
+      class="infoArea"
+      :class="{ infoAreaSticky }"
+    >
       <watch-video-info
         v-if="!isLoading"
         :id="videoId"