From 713738b5ff7d3ee5f2ba2170d2489be31f9748d2 Mon Sep 17 00:00:00 2001 From: PikachuEXE Date: Mon, 30 May 2022 06:33:27 +0800 Subject: [PATCH] * 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 | 5 +- .../ft-icon-button/ft-icon-button.js | 16 +-- .../ft-icon-button/ft-icon-button.sass | 10 +- .../ft-icon-button/ft-icon-button.vue | 10 +- .../components/ft-list-video/ft-list-video.js | 97 ++++++++++++------- .../ft-list-video/ft-list-video.vue | 4 +- .../watch-video-info/watch-video-info.js | 42 ++++---- .../watch-video-info/watch-video-info.vue | 6 +- 8 files changed, 116 insertions(+), 74 deletions(-) diff --git a/_scripts/dev-runner.js b/_scripts/dev-runner.js index 96dc2772..2e4afab3 100644 --- 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 diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.js b/src/renderer/components/ft-icon-button/ft-icon-button.js index 02e3bcdb..c324021b 100644 --- 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() diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.sass b/src/renderer/components/ft-icon-button/ft-icon-button.sass index 8099b01d..cd94d89a 100644 --- 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% + diff --git a/src/renderer/components/ft-icon-button/ft-icon-button.vue b/src/renderer/components/ft-icon-button/ft-icon-button.vue index d1abbda0..94940d88 100644 --- 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 @@ > diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js index 5b089d1e..682ecef1 100644 --- 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 () { diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue index 625ef3b8..68a6a701 100644 --- 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 @@
{ - 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({ 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 1d21d801..fbece05d 100644 --- 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" />