* 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
2022-05-30 06:33:27 +08:00 · 2022-05-30 06:33:27 +08:00 · 713738b5ff
parent a8e517adfa
commit 713738b5ff
8 changed files with 116 additions and 74 deletions
--- a/_scripts/dev-runner.js
+++ b/_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
--- a/src/renderer/components/ft-icon-button/ft-icon-button.js
+++ b/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()
--- a/src/renderer/components/ft-icon-button/ft-icon-button.sass
+++ b/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%
+
--- a/src/renderer/components/ft-icon-button/ft-icon-button.vue
+++ b/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>
--- a/src/renderer/components/ft-list-video/ft-list-video.js
+++ b/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 () {
--- a/src/renderer/components/ft-list-video/ft-list-video.vue
+++ b/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
--- a/src/renderer/components/watch-video-info/watch-video-info.js
+++ b/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({
--- a/src/renderer/components/watch-video-info/watch-video-info.vue
+++ b/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