* 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
This commit is contained in:
PikachuEXE 2022-05-30 06:33:27 +08:00 committed by GitHub
parent a8e517adfa
commit 713738b5ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 116 additions and 74 deletions

View File

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

View File

@ -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()

View File

@ -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%

View File

@ -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>

View File

@ -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 () {

View File

@ -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

View File

@ -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({

View File

@ -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