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 @@
>
-
- {{ label }}
+ {{ option.type === 'divider' ? '' : option.label }}
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"
/>