Fix scrolling through the download dropdown (#2426)

* Fix scrolling through the download dropdown

* Fix lining issue

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

@@ -300,6 +300,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

@@ -96,6 +96,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

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

src/renderer/views/Watch/Watch.sass

@@ -75,6 +75,10 @@
     position: relative
 
   @media only screen and (min-width: 901px)
+    .infoArea
+      scroll-margin-top: 76px
+
+    .infoAreaSticky
       position: sticky
       top: 76px
 

src/renderer/views/Watch/Watch.vue

@@ -74,7 +74,9 @@
     />
     <div
       v-if="(isFamilyFriendly || !showFamilyFriendlyOnly)"
+      ref="infoArea"
       class="infoArea"
+      :class="{ infoAreaSticky }"
     >
       <watch-video-info
         v-if="!isLoading"