This commit is contained in:
Jason 2024-04-24 03:33:30 +00:00 committed by GitHub
commit be1007ed81
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 131 additions and 2 deletions

View File

@ -8,6 +8,7 @@
:value="downloadBehavior"
:select-names="downloadBehaviorNames"
:select-values="downloadBehaviorValues"
:icon="['fas', 'download']"
@change="updateDownloadBehavior"
/>
</ft-flex-box>

View File

@ -9,6 +9,7 @@
:select-names="externalPlayerNames"
:select-values="externalPlayerValues"
:tooltip="$t('Tooltips.External Player Settings.External Player')"
:icon="['fas', 'external-link-alt']"
@change="updateExternalPlayer"
/>
</ft-flex-box>

View File

@ -10,6 +10,7 @@ import FtSelect from '../../components/ft-select/ft-select.vue'
import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
import {
showToast,
getIconForSortPreference
} from '../../helpers/utils'
const SORT_BY_VALUES = {
@ -269,6 +270,8 @@ export default defineComponent({
this.query = query
},
getIconForSortPreference: (s) => getIconForSortPreference(s),
...mapActions([
'addVideos',
'updatePlaylist',

View File

@ -40,6 +40,7 @@
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('User Playlists.Sort By.Sort By')"
:icon="getIconForSortPreference(sortBy)"
@change="sortBy = $event"
/>
</div>

View File

@ -10,6 +10,7 @@
:value="profileNameList[filteredProfileIndex]"
:select-names="profileNameList"
:select-values="profileNameList"
:icon="['fas', 'filter']"
@change="handleProfileFilterChange"
/>
</ft-flex-box>

View File

@ -88,12 +88,19 @@
font-size: 18px;
font-weight: normal;
position: absolute;
display: flex;
column-gap: 6px;
inset-inline-start: 0;
inset-block-start: 10px;
transition: 0.2s ease all;
color: var(--tertiary-text-color);
}
.select-icon {
inline-size: 14px;
block-size: 14px;
}
/* active state */
.select-text:focus ~ .select-label, .select-text:valid ~ .select-label {
color: var(--accent-color);

View File

@ -39,6 +39,14 @@ export default defineComponent({
describeById: {
type: String,
default: null
},
icon: {
type: Array,
required: true
},
iconColor: {
type: String,
default: null
}
},
emits: ['change'],

View File

@ -30,6 +30,11 @@
:for="sanitizedId ?? sanitizedPlaceholder"
:hidden="disabled"
>
<font-awesome-icon
:icon="icon"
class="select-icon"
:color="iconColor"
/>
{{ placeholder }}
</label>
<ft-tooltip

View File

@ -13,6 +13,8 @@
:value="sponsorBlockValues.color"
:select-names="colorNames"
:select-values="colorValues"
:icon="['fas', 'palette']"
:icon-color="sponsorBlockValues.color"
@change="updateColor"
/>
<ft-select
@ -22,6 +24,7 @@
:value="sponsorBlockValues.skip"
:select-names="skipNames"
:select-values="skipValues"
:icon="['fas', 'forward']"
@change="updateSkipOption"
/>
</div>

View File

@ -47,6 +47,7 @@
:select-names="backendNames"
:select-values="backendValues"
:tooltip="$t('Tooltips.General Settings.Preferred API Backend')"
:icon="['fas', 'server']"
@change="handlePreferredApiBackend"
/>
<ft-select
@ -54,6 +55,7 @@
:value="landingPage"
:select-names="defaultPageNames"
:select-values="defaultPageValues"
:icon="['fas', 'location-dot']"
@change="updateLandingPage"
/>
<ft-select
@ -61,6 +63,7 @@
:value="listType"
:select-names="viewTypeNames"
:select-values="viewTypeValues"
:icon="listType === 'grid' ? ['fas', 'grip'] : ['fas', 'list']"
@change="updateListType"
/>
<ft-select
@ -69,6 +72,7 @@
:select-names="thumbnailTypeNames"
:select-values="thumbnailTypeValues"
:tooltip="$t('Tooltips.General Settings.Thumbnail Preference')"
:icon="['fas', 'images']"
@change="handleThumbnailPreferenceChange"
/>
<ft-select
@ -76,6 +80,7 @@
:value="currentLocale"
:select-names="localeNames"
:select-values="localeOptions"
:icon="['fas', 'language']"
@change="updateCurrentLocale"
/>
<ft-select
@ -83,6 +88,7 @@
:value="region"
:select-names="regionNames"
:select-values="regionValues"
:icon="['fas', 'globe']"
:tooltip="$t('Tooltips.General Settings.Region for Trending')"
@change="updateRegion"
/>
@ -91,6 +97,7 @@
:value="externalLinkHandling"
:select-names="externalLinkHandlingNames"
:select-values="externalLinkHandlingValues"
:icon="['fas', 'external-link-alt']"
:tooltip="$t('Tooltips.General Settings.External Link Handling')"
@change="updateExternalLinkHandling"
/>

View File

@ -139,6 +139,7 @@
:value="videoPlaybackRateInterval"
:select-names="playbackRateIntervalValues"
:select-values="playbackRateIntervalValues"
:icon="['fas', 'gauge']"
@change="updateVideoPlaybackRateInterval"
/>
</ft-flex-box>
@ -149,6 +150,7 @@
:select-names="formatNames"
:select-values="formatValues"
:tooltip="$t('Tooltips.Player Settings.Default Video Format')"
:icon="['fas', 'file-video']"
@change="updateDefaultVideoFormat"
/>
<ft-select
@ -156,6 +158,7 @@
:value="defaultQuality"
:select-names="qualityNames"
:select-values="qualityValues"
:icon="['fas', 'photo-film']"
@change="updateDefaultQuality"
/>
<ft-toggle-switch
@ -184,6 +187,7 @@
:value="screenshotFormat"
:select-names="screenshotFormatNames"
:select-values="screenshotFormatValues"
:icon="['fas', 'file-image']"
@change="handleUpdateScreenshotFormat"
/>
<ft-slider

View File

@ -19,6 +19,7 @@
:select-names="protocolNames"
:select-values="protocolValues"
class="protocol-dropdown"
:icon="['fas', 'microchip']"
@change="handleUpdateProxyProtocol"
/>
</ft-flex-box>

View File

@ -57,6 +57,7 @@
:value="baseTheme"
:select-names="baseThemeNames"
:select-values="baseThemeValues"
:icon="['fas', 'palette']"
@change="updateBaseTheme"
/>
<ft-select
@ -65,6 +66,8 @@
:select-names="colorNames"
:select-values="colorValues"
:disabled="!areColorThemesEnabled"
:icon="['fas', 'palette']"
icon-color="var(--primary-color)"
@change="updateMainColor"
/>
<ft-select
@ -73,6 +76,8 @@
:select-names="colorNames"
:select-values="colorValues"
:disabled="!areColorThemesEnabled"
:icon="['fas', 'palette']"
icon-color="var(--accent-color)"
@change="updateSecColor"
/>
</ft-flex-box>

View File

@ -47,6 +47,7 @@
:value="currentSortValue"
:select-names="sortNames"
:select-values="sortValues"
:icon="['fas', 'arrow-down-short-wide']"
@change="handleSortChange"
/>
<div

View File

@ -15,6 +15,39 @@ function currentLocale () {
return i18n.locale.replace('_', '-')
}
export function getIconForSortPreference(sortPreference) {
switch (sortPreference) {
case 'name_descending':
case 'author_descending':
case 'video_title_descending':
// text descending
return ['fas', 'sort-alpha-down-alt']
case 'name_ascending':
case 'author_ascending':
case 'video_title_ascending':
// text ascending
return ['fas', 'sort-alpha-down']
case 'latest_updated_first':
case 'latest_created_first':
case 'latest_played_first':
case 'date_added_descending':
case 'last':
case 'newest':
case 'popular':
case 'custom':
// quantity descending
return ['fas', 'arrow-down-wide-short']
case 'earliest_updated_first':
case 'earliest_created_first':
case 'earliest_played_first':
case 'date_added_ascending':
case 'oldest':
default:
// quantity ascending
return ['fas', 'arrow-down-short-wide']
}
}
/**
* @param {string} publishedText
* @param {boolean} isLive

View File

@ -14,6 +14,8 @@ import {
faAngleDown,
faAngleUp,
faArrowDown,
faArrowDownShortWide,
faArrowDownWideShort,
faArrowLeft,
faArrowRight,
faArrowUp,
@ -37,20 +39,29 @@ import {
faEye,
faEyeSlash,
faFileDownload,
faFileImage,
faFileVideo,
faFilter,
faFire,
faForward,
faGauge,
faGlobe,
faGrip,
faHashtag,
faHeart,
faHistory,
faImages,
faInfoCircle,
faLanguage,
faLink,
faLinkSlash,
faList,
faLocationDot,
faMicrochip,
faNewspaper,
faPalette,
faPause,
faPhotoFilm,
faPlay,
faPlus,
faQuestionCircle,
@ -60,8 +71,11 @@ import {
faSatelliteDish,
faSave,
faSearch,
faServer,
faShareAlt,
faSlidersH,
faSortAlphaDown,
faSortAlphaDownAlt,
faSortDown,
faStepBackward,
faStepForward,
@ -93,6 +107,8 @@ library.add(
faAngleDown,
faAngleUp,
faArrowDown,
faArrowDownShortWide,
faArrowDownWideShort,
faArrowLeft,
faArrowRight,
faArrowUp,
@ -116,22 +132,32 @@ library.add(
faEye,
faEyeSlash,
faFileDownload,
faFileImage,
faFileVideo,
faFilter,
faFire,
faForward,
faGauge,
faGlobe,
faGrip,
faHashtag,
faHeart,
faHistory,
faImages,
faInfoCircle,
faLanguage,
faLink,
faLinkSlash,
faList,
faLocationDot,
faMicrochip,
faNewspaper,
faPalette,
faPause,
faPhotoFilm,
faPlay,
faPlus,
faPhotoFilm,
faQuestionCircle,
faRandom,
faRetweet,
@ -139,8 +165,11 @@ library.add(
faSatelliteDish,
faSave,
faSearch,
faServer,
faShareAlt,
faSlidersH,
faSortAlphaDown,
faSortAlphaDownAlt,
faSortDown,
faStepBackward,
faStepForward,

View File

@ -18,7 +18,8 @@ import {
copyToClipboard,
extractNumberFromString,
formatNumber,
showToast
showToast,
getIconForSortPreference
} from '../../helpers/utils'
import { isNullOrEmpty } from '../../helpers/strings'
import packageDetails from '../../../../package.json'
@ -1950,6 +1951,8 @@ export default defineComponent({
})
},
getIconForSortPreference: (s) => getIconForSortPreference(s),
...mapActions([
'showOutlines',
'updateSubscriptionDetails',

View File

@ -237,6 +237,7 @@
:select-names="videoLiveShortSelectNames"
:select-values="videoLiveShortSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="getIconForSortPreference(videoSortBy)"
@change="videoSortBy = $event"
/>
<ft-select
@ -246,6 +247,7 @@
:select-names="videoLiveShortSelectNames"
:select-values="videoLiveShortSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="getIconForSortPreference(shortSortBy)"
@change="shortSortBy = $event"
/>
<ft-select
@ -255,6 +257,7 @@
:select-names="videoLiveShortSelectNames"
:select-values="videoLiveShortSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="getIconForSortPreference(liveSortBy)"
@change="liveSortBy = $event"
/>
<ft-select
@ -264,6 +267,7 @@
:select-names="playlistSelectNames"
:select-values="playlistSelectValues"
:placeholder="$t('Search Filters.Sort By.Sort By')"
:icon="getIconForSortPreference(playlistSortBy)"
@change="playlistSortBy = $event"
/>
</div>

View File

@ -14,7 +14,12 @@ import {
getLocalPlaylistContinuation,
parseLocalPlaylistVideo,
} from '../../helpers/api/local'
import { extractNumberFromString, setPublishedTimestampsInvidious, showToast } from '../../helpers/utils'
import {
extractNumberFromString,
getIconForSortPreference,
setPublishedTimestampsInvidious,
showToast,
} from '../../helpers/utils'
import { invidiousGetPlaylistInfo, youtubeImageUrlToInvidious } from '../../helpers/api/invidious'
const SORT_BY_VALUES = {
@ -557,6 +562,8 @@ export default defineComponent({
}
},
getIconForSortPreference: (s) => getIconForSortPreference(s),
...mapActions([
'updateSubscriptionDetails',
'updatePlaylist',

View File

@ -50,6 +50,7 @@
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('Playlist.Sort By.Sort By')"
:icon="getIconForSortPreference(sortOrder)"
@change="updateUserPlaylistSortOrder"
/>
<template

View File

@ -12,6 +12,7 @@ import FtInput from '../../components/ft-input/ft-input.vue'
import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
import FtAutoLoadNextPageWrapper from '../../components/ft-auto-load-next-page-wrapper/ft-auto-load-next-page-wrapper.vue'
import { getIconForSortPreference } from '../../helpers/utils'
const SORT_BY_VALUES = {
NameAscending: 'name_ascending',
@ -242,6 +243,8 @@ export default defineComponent({
})
},
getIconForSortPreference: (s) => getIconForSortPreference(s),
...mapActions([
'showCreatePlaylistPrompt'
])

View File

@ -49,6 +49,7 @@
:select-names="sortBySelectNames"
:select-values="sortBySelectValues"
:placeholder="$t('User Playlists.Sort By.Sort By')"
:icon="getIconForSortPreference(sortBy)"
@change="sortBy = $event"
/>
</div>