mirror of https://github.com/FreeTubeApp/FreeTube
Merge 632a2e0f2e
into a94910df27
This commit is contained in:
commit
be1007ed81
|
@ -8,6 +8,7 @@
|
|||
:value="downloadBehavior"
|
||||
:select-names="downloadBehaviorNames"
|
||||
:select-values="downloadBehaviorValues"
|
||||
:icon="['fas', 'download']"
|
||||
@change="updateDownloadBehavior"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
:value="profileNameList[filteredProfileIndex]"
|
||||
:select-names="profileNameList"
|
||||
:select-values="profileNameList"
|
||||
:icon="['fas', 'filter']"
|
||||
@change="handleProfileFilterChange"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -39,6 +39,14 @@ export default defineComponent({
|
|||
describeById: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
icon: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
emits: ['change'],
|
||||
|
|
|
@ -30,6 +30,11 @@
|
|||
:for="sanitizedId ?? sanitizedPlaceholder"
|
||||
:hidden="disabled"
|
||||
>
|
||||
<font-awesome-icon
|
||||
:icon="icon"
|
||||
class="select-icon"
|
||||
:color="iconColor"
|
||||
/>
|
||||
{{ placeholder }}
|
||||
</label>
|
||||
<ft-tooltip
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
:select-names="protocolNames"
|
||||
:select-values="protocolValues"
|
||||
class="protocol-dropdown"
|
||||
:icon="['fas', 'microchip']"
|
||||
@change="handleUpdateProxyProtocol"
|
||||
/>
|
||||
</ft-flex-box>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -47,6 +47,7 @@
|
|||
:value="currentSortValue"
|
||||
:select-names="sortNames"
|
||||
:select-values="sortValues"
|
||||
:icon="['fas', 'arrow-down-short-wide']"
|
||||
@change="handleSortChange"
|
||||
/>
|
||||
<div
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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,
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -50,6 +50,7 @@
|
|||
:select-names="sortBySelectNames"
|
||||
:select-values="sortBySelectValues"
|
||||
:placeholder="$t('Playlist.Sort By.Sort By')"
|
||||
:icon="getIconForSortPreference(sortOrder)"
|
||||
@change="updateUserPlaylistSortOrder"
|
||||
/>
|
||||
<template
|
||||
|
|
|
@ -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'
|
||||
])
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue