* Implement divider for video "more dropdown menu" (#1748)

* * Implement divider for video "more dropdown menu"

* * Update API for ft-icon-button

* * Update existing ft-icon-button user to use new API for dropdown options

* * Update ft-icon-button to remove unused old API

* * Update divider to be less visible

* * Update padding of list item

* * Update WebpackDevServer option to avoid app reloading on MacOS .DS_Store file change

_scripts/dev-runner.js

@@ -119,7 +119,10 @@ function startRenderer(callback) {
     static: {
       directory: path.join(process.cwd(), 'static'),
       watch: {
-        ignored: /(dashFiles|storyboards)\/*/
+        ignored: [
+          /(dashFiles|storyboards)\/*/,
+          '/**/.DS_Store',
+        ]
       }
     },
     port

src/renderer/components/ft-icon-button/ft-icon-button.js

@@ -44,11 +44,11 @@ export default Vue.extend({
       type: String,
       default: 'bottom'
     },
-    dropdownNames: {
-      type: Array,
-      default: () => { return [] }
-    },
-    dropdownValues: {
+    dropdownOptions: {
+      // Array of objects with these properties
+      // - type: ('labelValue'|'divider', default to 'labelValue' for less typing)
+      // - label: String (if type == 'labelValue')
+      // - value: String (if type == 'labelValue')
       type: Array,
       default: () => { return [] }
     }
@@ -107,18 +107,18 @@ export default Vue.extend({
     },
 
     handleIconClick: function () {
-      if (this.forceDropdown || (this.dropdownNames.length > 0 && this.dropdownValues.length > 0)) {
+      if (this.forceDropdown || (this.dropdownOptions.length > 0)) {
         this.toggleDropdown()
       } else {
         this.$emit('click')
       }
     },
 
-    handleDropdownClick: function (index) {
+    handleDropdownClick: function ({ url, index }) {
       if (this.returnIndex) {
         this.$emit('click', index)
       } else {
-        this.$emit('click', this.dropdownValues[index])
+        this.$emit('click', url)
       }
 
       this.focusOut()

src/renderer/components/ft-icon-button/ft-icon-button.sass

@@ -83,7 +83,7 @@
     list-style-type: none
 
   .listItem
-    padding: 10px
+    padding: 8px 10px
     margin: 0
     white-space: nowrap
     cursor: pointer
@@ -96,3 +96,11 @@
     &:active
       background-color: var(--side-nav-active-color)
       transition: background 0.1s ease-in
+
+  .listItemDivider
+    width: 95%
+    margin: 1px auto
+    border-top: 1px solid var(--tertiary-text-color)
+    // Too "visible" with current color
+    opacity: 50%
+

src/renderer/components/ft-icon-button/ft-icon-button.vue

@@ -28,16 +28,16 @@
     >
       <slot>
         <ul
-          v-if="dropdownNames.length > 0"
+          v-if="dropdownOptions.length > 0"
           class="list"
         >
           <li
-            v-for="(label, index) in dropdownNames"
+            v-for="(option, index) in dropdownOptions"
             :key="index"
-            class="listItem"
-            @click="handleDropdownClick(index)"
+            :class="option.type === 'divider' ? 'listItemDivider' : 'listItem'"
+            @click="handleDropdownClick({url: option.value, index: index})"
           >
-            {{ label }}
+            {{ option.type === 'divider' ? '' : option.label }}
           </li>
         </ul>
       </slot>

src/renderer/components/ft-list-video/ft-list-video.js

@@ -59,20 +59,7 @@ export default Vue.extend({
       isFavorited: false,
       isUpcoming: false,
       isPremium: false,
-      hideViews: false,
-      optionsValues: [
-        'history',
-        'openYoutube',
-        'copyYoutube',
-        'openYoutubeEmbed',
-        'copyYoutubeEmbed',
-        'openInvidious',
-        'copyInvidious',
-        'openYoutubeChannel',
-        'copyYoutubeChannel',
-        'openInvidiousChannel',
-        'copyInvidiousChannel'
-      ]
+      hideViews: false
     }
   },
   computed: {
@@ -130,27 +117,71 @@ export default Vue.extend({
       return (this.watchProgress / this.data.lengthSeconds) * 100
     },
 
-    optionsNames: function () {
-      const names = [
-        this.$t('Video.Open in YouTube'),
-        this.$t('Video.Copy YouTube Link'),
-        this.$t('Video.Open YouTube Embedded Player'),
-        this.$t('Video.Copy YouTube Embedded Player Link'),
-        this.$t('Video.Open in Invidious'),
-        this.$t('Video.Copy Invidious Link'),
-        this.$t('Video.Open Channel in YouTube'),
-        this.$t('Video.Copy YouTube Channel Link'),
-        this.$t('Video.Open Channel in Invidious'),
-        this.$t('Video.Copy Invidious Channel Link')
-      ]
+    dropdownOptions: function () {
+      const options = []
 
-      if (this.watched) {
-        names.unshift(this.$t('Video.Remove From History'))
-      } else {
-        names.unshift(this.$t('Video.Mark As Watched'))
+      options.push(
+        {
+          label: this.watched
+            ? this.$t('Video.Remove From History')
+            : this.$t('Video.Mark As Watched'),
+          value: 'history'
+        },
+        {
+          type: 'divider'
+        },
+        {
+          label: this.$t('Video.Copy YouTube Link'),
+          value: 'copyYoutube'
+        },
+        {
+          label: this.$t('Video.Copy YouTube Embedded Player Link'),
+          value: 'copyYoutubeEmbed'
+        },
+        {
+          label: this.$t('Video.Copy Invidious Link'),
+          value: 'copyInvidious'
+        },
+        {
+          type: 'divider'
+        },
+        {
+          label: this.$t('Video.Open in YouTube'),
+          value: 'openYoutube'
+        },
+        {
+          label: this.$t('Video.Open YouTube Embedded Player'),
+          value: 'openYoutubeEmbed'
+        },
+        {
+          label: this.$t('Video.Open in Invidious'),
+          value: 'openInvidious'
+        },
+        {
+          type: 'divider'
+        },
+        {
+          label: this.$t('Video.Copy YouTube Channel Link'),
+          value: 'copyYoutubeChannel'
+        },
+        {
+          label: this.$t('Video.Copy Invidious Channel Link'),
+          value: 'copyInvidiousChannel'
+        },
+        {
+          type: 'divider'
+        },
+        {
+          label: this.$t('Video.Open Channel in YouTube'),
+          value: 'openYoutubeChannel'
+        },
+        {
+          label: this.$t('Video.Open Channel in Invidious'),
+          value: 'openInvidiousChannel'
         }
+      )
 
-      return names
+      return options
     },
 
     thumbnail: function () {

src/renderer/components/ft-list-video/ft-list-video.vue

@@ -66,13 +66,13 @@
     <div class="info">
       <ft-icon-button
         class="optionsButton"
+        icon="ellipsis-v"
         title="More Options"
         theme="base-no-default"
         :size="16"
         :use-shadow="false"
         dropdown-position-x="left"
-        :dropdown-names="optionsNames"
-        :dropdown-values="optionsValues"
+        :dropdown-options="dropdownOptions"
         @click="handleOptionsClick"
       />
       <router-link

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

@@ -118,12 +118,7 @@ export default Vue.extend({
   },
   data: function () {
     return {
-      formatTypeLabel: 'VIDEO FORMATS',
-      formatTypeValues: [
-        'dash',
-        'legacy',
-        'audio'
-      ]
+      formatTypeLabel: 'VIDEO FORMATS'
     }
   },
   computed: {
@@ -175,23 +170,29 @@ export default Vue.extend({
       return this.inFavoritesPlaylist ? 'base favorite' : 'base'
     },
 
-    downloadLinkNames: function () {
+    downloadLinkOptions: function () {
       return this.downloadLinks.map((download) => {
-        return download.label
+        return {
+          label: download.label,
+          value: download.url
+        }
       })
     },
 
-    downloadLinkValues: function () {
-      return this.downloadLinks.map((download) => {
-        return download.url
-      })
-    },
-
-    formatTypeNames: function () {
+    formatTypeOptions: function () {
       return [
-        this.$t('Change Format.Use Dash Formats').toUpperCase(),
-        this.$t('Change Format.Use Legacy Formats').toUpperCase(),
-        this.$t('Change Format.Use Audio Formats').toUpperCase()
+        {
+          label: this.$t('Change Format.Use Dash Formats').toUpperCase(),
+          value: 'dash'
+        },
+        {
+          label: this.$t('Change Format.Use Legacy Formats').toUpperCase(),
+          value: 'legacy'
+        },
+        {
+          label: this.$t('Change Format.Use Audio Formats').toUpperCase(),
+          value: 'audio'
+        }
       ]
     },
 
@@ -409,8 +410,9 @@ export default Vue.extend({
     },
 
     handleDownload: function (index) {
-      const url = this.downloadLinkValues[index]
-      const linkName = this.downloadLinkNames[index]
+      const selectedDownloadLinkOption = this.downloadLinkOptions[index]
+      const url = selectedDownloadLinkOption.value
+      const linkName = selectedDownloadLinkOption.label
       const extension = this.grabExtensionFromUrl(linkName)
 
       this.downloadMedia({

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

@@ -100,8 +100,7 @@
           theme="secondary"
           icon="download"
           :return-index="true"
-          :dropdown-names="downloadLinkNames"
-          :dropdown-values="downloadLinkValues"
+          :dropdown-options="downloadLinkOptions"
           @click="handleDownload"
         />
         <ft-icon-button
@@ -110,8 +109,7 @@
           class="option"
           theme="secondary"
           icon="file-video"
-          :dropdown-names="formatTypeNames"
-          :dropdown-values="formatTypeValues"
+          :dropdown-options="formatTypeOptions"
           @click="handleFormatChange"
         />
         <ft-share-button