From 01cfbe7b1e899aa0cc0765258e2c75489d0bfe7f Mon Sep 17 00:00:00 2001
From: absidue <48293849+absidue@users.noreply.github.com>
Date: Sun, 31 Jul 2022 16:08:49 +0200
Subject: [PATCH] Fix scrolling through the download dropdown (#2426)

* Fix scrolling through the download dropdown

* Fix lining issue
---
 .../components/watch-video-info/watch-video-info.js  | 12 ++++++++++++
 .../components/watch-video-info/watch-video-info.vue |  1 +
 src/renderer/views/Watch/Watch.js                    |  3 ++-
 src/renderer/views/Watch/Watch.sass                  |  6 +++++-
 src/renderer/views/Watch/Watch.vue                   |  2 ++
 5 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/watch-video-info/watch-video-info.js b/src/renderer/components/watch-video-info/watch-video-info.js
index 7a9ebae5..d89da7e5 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/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: {
diff --git a/src/renderer/components/watch-video-info/watch-video-info.vue b/src/renderer/components/watch-video-info/watch-video-info.vue
index da6cc052..db0bce52 100644
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/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"
diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index 69ae3189..54114546 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/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: {
diff --git a/src/renderer/views/Watch/Watch.sass b/src/renderer/views/Watch/Watch.sass
index ff97d47d..0382def2 100644
--- a/src/renderer/views/Watch/Watch.sass
+++ b/src/renderer/views/Watch/Watch.sass
@@ -74,7 +74,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
 
diff --git a/src/renderer/views/Watch/Watch.vue b/src/renderer/views/Watch/Watch.vue
index db724a5f..241d7dd0 100644
--- a/src/renderer/views/Watch/Watch.vue
+++ b/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"