+ {{ $t('Subscriptions.Subscriptions') }} +
++ {{ $t('History.History') }} +
++ {{ $t('Playlists') }} +
+
@@ -125,4 +133,3 @@
-
diff --git a/src/renderer/components/ft-community-post/slider-style.css b/src/renderer/components/ft-community-post/slider-style.css
deleted file mode 100644
index b001f1606a59f..0000000000000
--- a/src/renderer/components/ft-community-post/slider-style.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.tns-nav .tns-nav-active {
- background-color: #999;
-}
-
-.tns-nav button {
- background-color: #ddd;
- border-radius: 50%;
- block-size: 1.5em;
- padding: 0;
- inline-size: 1.5em;
-}
diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.css b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.css
new file mode 100644
index 0000000000000..667067465ab81
--- /dev/null
+++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.css
@@ -0,0 +1,8 @@
+.center {
+ text-align: center;
+}
+
+.playlistNameInput {
+ inline-size: 80%;
+ max-inline-size: 600px;
+}
diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
new file mode 100644
index 0000000000000..1beac5852a38a
--- /dev/null
+++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.js
@@ -0,0 +1,79 @@
+import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
+import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
+import FtPrompt from '../ft-prompt/ft-prompt.vue'
+import FtButton from '../ft-button/ft-button.vue'
+import FtInput from '../ft-input/ft-input.vue'
+import FtPlaylistSelector from '../ft-playlist-selector/ft-playlist-selector.vue'
+import {
+ showToast,
+} from '../../helpers/utils'
+
+export default defineComponent({
+ name: 'FtCreatePlaylistPrompt',
+ components: {
+ FtFlexBox,
+ FtPrompt,
+ FtButton,
+ FtInput,
+ FtPlaylistSelector
+ },
+ data: function () {
+ return {
+ playlistName: '',
+ }
+ },
+ computed: {
+ allPlaylists: function () {
+ return this.$store.getters.getAllPlaylists
+ },
+ newPlaylistVideoObject: function () {
+ return this.$store.getters.getNewPlaylistVideoObject
+ },
+ },
+ mounted: function () {
+ this.playlistName = this.newPlaylistVideoObject.title
+ // Faster to input required playlist name
+ this.$refs.playlistNameInput.focus()
+ },
+ methods: {
+ createNewPlaylist: function () {
+ if (this.playlistName === '') {
+ showToast(this.$t('User Playlists.SinglePlaylistView.Toast["Playlist name cannot be empty. Please input a name."]'))
+ return
+ }
+
+ const nameExists = this.allPlaylists.findIndex((playlist) => {
+ return playlist.playlistName === this.playlistName
+ })
+ if (nameExists !== -1) {
+ showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["There is already a playlist with this name. Please pick a different name."]'))
+ return
+ }
+
+ const playlistObject = {
+ playlistName: this.playlistName,
+ protected: false,
+ description: '',
+ videos: [],
+ }
+
+ try {
+ this.addPlaylist(playlistObject)
+ showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["Playlist {playlistName} has been successfully created."]', {
+ playlistName: this.playlistName,
+ }))
+ } catch (e) {
+ showToast(this.$t('User Playlists.CreatePlaylistPrompt.Toast["There was an issue with creating the playlist."]'))
+ console.error(e)
+ } finally {
+ this.hideCreatePlaylistPrompt()
+ }
+ },
+
+ ...mapActions([
+ 'addPlaylist',
+ 'hideCreatePlaylistPrompt',
+ ])
+ }
+})
diff --git a/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue
new file mode 100644
index 0000000000000..f541d08892a36
--- /dev/null
+++ b/src/renderer/components/ft-create-playlist-prompt/ft-create-playlist-prompt.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/renderer/components/ft-element-list/ft-element-list.js b/src/renderer/components/ft-element-list/ft-element-list.js
index 57f1ffe27208c..642b928f65748 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.js
+++ b/src/renderer/components/ft-element-list/ft-element-list.js
@@ -13,6 +13,10 @@ export default defineComponent({
type: Array,
required: true
},
+ dataType: {
+ type: String,
+ default: null,
+ },
display: {
type: String,
required: false,
diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
index 5f9de1ee13494..8b0410a570baf 100644
--- a/src/renderer/components/ft-element-list/ft-element-list.vue
+++ b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -4,9 +4,10 @@
>
- + {{ $t('User Playlists.CreatePlaylistPrompt.New Playlist Name') }} +
+
-
-
-
diff --git a/src/renderer/components/privacy-settings/privacy-settings.js b/src/renderer/components/privacy-settings/privacy-settings.js
index 0b541e0a532d7..e6615e3bfbde9 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.js
+++ b/src/renderer/components/privacy-settings/privacy-settings.js
@@ -22,6 +22,7 @@ export default defineComponent({
showSearchCachePrompt: false,
showRemoveHistoryPrompt: false,
showRemoveSubscriptionsPrompt: false,
+ showRemovePlaylistsPrompt: false,
promptValues: [
'yes',
'no'
@@ -114,6 +115,14 @@ export default defineComponent({
this.clearSubscriptionsCache()
},
+ handleRemovePlaylists: function (option) {
+ this.showRemovePlaylistsPrompt = false
+ if (option !== 'yes') { return }
+
+ this.removeAllPlaylists()
+ showToast(this.$t('Settings.Privacy Settings.All playlists have been removed'))
+ },
+
...mapActions([
'updateRememberHistory',
'updateRemoveVideoMetaFiles',
@@ -125,6 +134,9 @@ export default defineComponent({
'removeProfile',
'updateActiveProfile',
'clearSubscriptionsCache',
+ 'updateAllSubscriptionsList',
+ 'updateProfileSubscriptions',
+ 'removeAllPlaylists',
])
}
})
diff --git a/src/renderer/components/privacy-settings/privacy-settings.vue b/src/renderer/components/privacy-settings/privacy-settings.vue
index e64b9203d4872..43ca939ad9682 100644
--- a/src/renderer/components/privacy-settings/privacy-settings.vue
+++ b/src/renderer/components/privacy-settings/privacy-settings.vue
@@ -59,6 +59,12 @@
background-color="var(--primary-color)"
@click="showRemoveSubscriptionsPrompt = true"
/>
+ - {{ channelName }} -
-
+
diff --git a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
index d7a4311e7112e..5db6fe4ab20e0 100644
--- a/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
+++ b/src/renderer/components/ft-list-hashtag/ft-list-hashtag.vue
@@ -9,6 +9,7 @@
>
+
- {{ handle }}
+
-
- •
- {{ $tc('Global.Counts.Subscriber Count', subscriberCount, {count: formattedSubscriberCount}) }}
-
-
- •
- {{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideoCount}) }}
-
+
-
+ {{ channelName }} +
+
+ {{ handle }}
+
+
+ •
+ {{ $tc('Global.Counts.Subscriber Count', subscriberCount, {count: formattedSubscriberCount}) }}
+
+
+ •
+ {{ $tc('Global.Counts.Video Count', videoCount, {count: formattedVideoCount}) }}
+
+
+
{{ $t("Video.Live Chat") }}
++ {{ $t("Video.Live Chat") }} + + {{ $tc('Global.Counts.Watching Count', watchingCount, { count: formattedWatchingCount }) }} + +
{
- if (typeof item.videoId !== 'undefined') {
+ isUserPlaylist: function () {
+ return this.playlistType === 'user'
+ },
+ userPlaylistsReady: function () {
+ return this.$store.getters.getPlaylistsReady
+ },
+ selectedUserPlaylist: function () {
+ if (this.playlistId == null || this.playlistId === '') { return null }
+
+ return this.$store.getters.getPlaylist(this.playlistId)
+ },
+ selectedUserPlaylistVideoCount () {
+ return this.selectedUserPlaylist?.videos?.length
+ },
+ selectedUserPlaylistLastUpdatedAt () {
+ return this.selectedUserPlaylist?.lastUpdatedAt
+ },
+
+ currentVideoIndexZeroBased: function () {
+ return this.playlistItems.findIndex((item) => {
+ if (item.playlistItemId != null && this.playlistItemId != null) {
+ return item.playlistItemId === this.playlistItemId
+ } else if (item.videoId != null) {
return item.videoId === this.videoId
} else {
return item.id === this.videoId
}
})
-
- return index + 1
+ },
+ currentVideoIndexOneBased: function () {
+ return this.currentVideoIndexZeroBased + 1
+ },
+ currentVideo: function () {
+ return this.playlistItems[this.currentVideoIndexZeroBased]
},
playlistVideoCount: function () {
@@ -87,27 +121,67 @@ export default defineComponent({
},
videoIndexInPlaylistItems: function () {
- if (this.shuffleEnabled) {
- return this.randomizedPlaylistItems.findIndex((item) => {
- return item === this.videoId
- })
- } else {
- return this.playlistItems.findIndex((item) => {
- return (item.id ?? item.videoId) === this.videoId
- })
+ const playlistItems = this.shuffleEnabled ? this.randomizedPlaylistItems : this.playlistItems
+
+ return playlistItems.findIndex((item) => {
+ if (item.playlistItemId != null && this.playlistItemId != null) {
+ return item.playlistItemId === this.playlistItemId
+ } else if (item.videoId != null) {
+ return item.videoId === this.videoId
+ } else {
+ return item.id === this.videoId
+ }
+ })
+ },
+ videoIsFirstPlaylistItem: function () {
+ return this.videoIndexInPlaylistItems === 0
+ },
+ videoIsLastPlaylistItem: function () {
+ return this.videoIndexInPlaylistItems === (this.playlistItems.length - 1)
+ },
+ videoIsNotPlaylistItem: function () {
+ return this.videoIndexInPlaylistItems === -1
+ },
+
+ playlistPageLinkTo() {
+ // For `router-link` attribute `to`
+ return {
+ path: `/playlist/${this.playlistId}`,
+ query: {
+ playlistType: this.isUserPlaylist ? 'user' : '',
+ },
}
},
},
watch: {
+ userPlaylistsReady: function() {
+ this.getPlaylistInfoWithDelay()
+ },
+ selectedUserPlaylistVideoCount () {
+ // Re-fetch from local store when current user playlist updated
+ this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
+ this.shufflePlaylistItems()
+ },
+ selectedUserPlaylistLastUpdatedAt () {
+ // Re-fetch from local store when current user playlist updated
+ this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
+ },
+ playlistItemId (newId, _oldId) {
+ // Playing online video
+ if (newId == null) { return }
+
+ // Re-fetch from local store when different item played
+ this.parseUserPlaylist(this.selectedUserPlaylist, { allowPlayingVideoRemoval: true })
+ },
videoId: function (newId, oldId) {
// Check if next video is from the shuffled list or if the user clicked a different video
if (this.shuffleEnabled) {
const newVideoIndex = this.randomizedPlaylistItems.findIndex((item) => {
- return item === newId
+ return item.videoId === newId
})
const oldVideoIndex = this.randomizedPlaylistItems.findIndex((item) => {
- return item === oldId
+ return item.videoId === oldId
})
if ((newVideoIndex - 1) !== oldVideoIndex) {
@@ -142,17 +216,14 @@ export default defineComponent({
this.getPlaylistInformationLocal()
}
}
- }
+ },
},
mounted: function () {
const cachedPlaylist = this.$store.getters.getCachedPlaylist
-
if (cachedPlaylist?.id === this.playlistId) {
this.loadCachedPlaylistInformation(cachedPlaylist)
- } else if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
- this.getPlaylistInformationInvidious()
} else {
- this.getPlaylistInformationLocal()
+ this.getPlaylistInfoWithDelay()
}
if ('mediaSession' in navigator) {
@@ -167,6 +238,24 @@ export default defineComponent({
}
},
methods: {
+ getPlaylistInfoWithDelay: function () {
+ if (this.getPlaylistInfoRun) { return }
+
+ this.isLoading = true
+ // `selectedUserPlaylist` result accuracy relies on data being ready
+ if (this.isUserPlaylist && !this.userPlaylistsReady) { return }
+
+ this.getPlaylistInfoRun = true
+
+ if (this.selectedUserPlaylist != null) {
+ this.parseUserPlaylist(this.selectedUserPlaylist)
+ } else if (!process.env.IS_ELECTRON || this.backendPreference === 'invidious') {
+ this.getPlaylistInformationInvidious()
+ } else {
+ this.getPlaylistInformationLocal()
+ }
+ },
+
toggleLoop: function () {
if (this.loopEnabled) {
this.loopEnabled = false
@@ -193,7 +282,9 @@ export default defineComponent({
showToast(this.$t('The playlist has been reversed'))
this.reversePlaylist = !this.reversePlaylist
- this.playlistItems = this.playlistItems.reverse()
+ // Create a new array to avoid changing array in data store state
+ // it could be user playlist or cache playlist
+ this.playlistItems = [].concat(this.playlistItems).reverse()
setTimeout(() => {
this.isLoading = false
}, 1)
@@ -214,114 +305,79 @@ export default defineComponent({
playlistId: this.playlistId
}
+ const videoIndex = this.videoIndexInPlaylistItems
+ const targetVideoIndex = (this.videoIsNotPlaylistItem || this.videoIsLastPlaylistItem) ? 0 : videoIndex + 1
if (this.shuffleEnabled) {
- const videoIndex = this.randomizedPlaylistItems.findIndex((item) => {
- return item === this.videoId
- })
+ let doShufflePlaylistItems = false
+ if (this.videoIsLastPlaylistItem && !this.loopEnabled) {
+ showToast(this.$t('The playlist has ended. Enable loop to continue playing'))
+ return
+ }
+ // loopEnabled = true
+ if (this.videoIsLastPlaylistItem || this.videoIsNotPlaylistItem) { doShufflePlaylistItems = true }
- if (videoIndex === this.randomizedPlaylistItems.length - 1) {
- if (this.loopEnabled) {
- this.$router.push(
- {
- path: `/watch/${this.randomizedPlaylistItems[0]}`,
- query: playlistInfo
- }
- )
- showToast(this.$t('Playing Next Video'))
- this.shufflePlaylistItems()
- } else {
- showToast(this.$t('The playlist has ended. Enable loop to continue playing'))
+ const targetPlaylistItem = this.randomizedPlaylistItems[targetVideoIndex]
+
+ this.$router.push(
+ {
+ path: `/watch/${targetPlaylistItem.videoId}`,
+ query: Object.assign(playlistInfo, { playlistItemId: targetPlaylistItem.playlistItemId }),
}
- } else {
- this.$router.push(
- {
- path: `/watch/${this.randomizedPlaylistItems[videoIndex + 1]}`,
- query: playlistInfo
- }
- )
- showToast(this.$t('Playing Next Video'))
- }
+ )
+ showToast(this.$t('Playing Next Video'))
+ if (doShufflePlaylistItems) { this.shufflePlaylistItems() }
} else {
- const videoIndex = this.playlistItems.findIndex((item) => {
- return (item.id ?? item.videoId) === this.videoId
- })
+ const targetPlaylistItem = this.playlistItems[targetVideoIndex]
- if (videoIndex === this.playlistItems.length - 1) {
- if (this.loopEnabled) {
- this.$router.push(
- {
- path: `/watch/${this.playlistItems[0].id ?? this.playlistItems[0].videoId}`,
- query: playlistInfo
- }
- )
- showToast(this.$t('Playing Next Video'))
- } else {
- showToast(this.$t('The playlist has ended. Enable loop to continue playing'))
- }
- } else {
- this.$router.push(
- {
- path: `/watch/${this.playlistItems[videoIndex + 1].id ?? this.playlistItems[videoIndex + 1].videoId}`,
- query: playlistInfo
- }
- )
- showToast(this.$t('Playing Next Video'))
+ const stopDueToLoopDisabled = this.videoIsLastPlaylistItem && !this.loopEnabled
+ if (stopDueToLoopDisabled) {
+ showToast(this.$t('The playlist has ended. Enable loop to continue playing'))
+ return
}
+
+ this.$router.push(
+ {
+ path: `/watch/${targetPlaylistItem.videoId}`,
+ query: Object.assign(playlistInfo, { playlistItemId: targetPlaylistItem.playlistItemId }),
+ }
+ )
+ showToast(this.$t('Playing Next Video'))
}
},
playPreviousVideo: function () {
- showToast('Playing previous video')
+ showToast(this.$t('Playing Previous Video'))
const playlistInfo = {
playlistId: this.playlistId
}
+ const videoIndex = this.videoIndexInPlaylistItems
+ const targetVideoIndex = (this.videoIsFirstPlaylistItem || this.videoIsNotPlaylistItem) ? this.playlistItems.length - 1 : videoIndex - 1
if (this.shuffleEnabled) {
- const videoIndex = this.randomizedPlaylistItems.findIndex((item) => {
- return item === this.videoId
- })
+ const targetPlaylistItem = this.randomizedPlaylistItems[targetVideoIndex]
- if (videoIndex === 0) {
- this.$router.push(
- {
- path: `/watch/${this.randomizedPlaylistItems[this.randomizedPlaylistItems.length - 1]}`,
- query: playlistInfo
- }
- )
- } else {
- this.$router.push(
- {
- path: `/watch/${this.randomizedPlaylistItems[videoIndex - 1]}`,
- query: playlistInfo
- }
- )
- }
+ this.$router.push(
+ {
+ path: `/watch/${targetPlaylistItem.videoId}`,
+ query: Object.assign(playlistInfo, { playlistItemId: targetPlaylistItem.playlistItemId }),
+ }
+ )
} else {
- const videoIndex = this.playlistItems.findIndex((item) => {
- return (item.id ?? item.videoId) === this.videoId
- })
+ const targetPlaylistItem = this.playlistItems[targetVideoIndex]
- if (videoIndex === 0) {
- this.$router.push(
- {
- path: `/watch/${this.playlistItems[this.randomizedPlaylistItems.length - 1].id ?? this.playlistItems[this.randomizedPlaylistItems.length - 1].videoId}`,
- query: playlistInfo
- }
- )
- } else {
- this.$router.push(
- {
- path: `/watch/${this.playlistItems[videoIndex - 1].id ?? this.playlistItems[videoIndex - 1].videoId}`,
- query: playlistInfo
- }
- )
- }
+ this.$router.push(
+ {
+ path: `/watch/${targetPlaylistItem.videoId}`,
+ query: Object.assign(playlistInfo, { playlistItemId: targetPlaylistItem.playlistItemId }),
+ }
+ )
}
},
loadCachedPlaylistInformation: async function (cachedPlaylist) {
this.isLoading = true
+ this.getPlaylistInfoRun = true
this.setCachedPlaylist(null)
this.playlistTitle = cachedPlaylist.title
@@ -412,22 +468,40 @@ export default defineComponent({
})
},
+ parseUserPlaylist: function (playlist, { allowPlayingVideoRemoval = true } = {}) {
+ this.playlistTitle = playlist.playlistName
+ this.channelName = ''
+ this.channelThumbnail = ''
+ this.channelId = ''
+
+ if (this.playlistItems.length === 0 || allowPlayingVideoRemoval) {
+ this.playlistItems = playlist.videos
+ } else {
+ // `this.currentVideo` relies on `playlistItems`
+ const latestPlaylistContainsCurrentVideo = playlist.videos.find(v => v.playlistItemId === this.playlistItemId) != null
+ // Only update list of videos if latest video list still contains currently playing video
+ if (latestPlaylistContainsCurrentVideo) {
+ this.playlistItems = playlist.videos
+ }
+ }
+
+ this.isLoading = false
+ },
+
shufflePlaylistItems: function () {
// Prevents the array from affecting the original object
const remainingItems = [].concat(this.playlistItems)
const items = []
- items.push(this.videoId)
+ items.push(this.currentVideo)
+ remainingItems.splice(this.currentVideoIndexZeroBased, 1)
- this.playlistItems.forEach((item) => {
+ while (remainingItems.length > 0) {
const randomInt = Math.floor(Math.random() * remainingItems.length)
- if ((remainingItems[randomInt].id ?? remainingItems[randomInt].videoId) !== this.videoId) {
- items.push(remainingItems[randomInt].id ?? remainingItems[randomInt].videoId)
- }
-
+ items.push(remainingItems[randomInt])
remainingItems.splice(randomInt, 1)
- })
+ }
this.randomizedPlaylistItems = items
},
diff --git a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
index 20a2a87ad10e5..624ce1cc99bb2 100644
--- a/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
+++ b/src/renderer/components/watch-video-playlist/watch-video-playlist.vue
@@ -12,32 +12,36 @@
>
{{ playlistTitle }}
-
- {{ channelName }}
-
-
- {{ channelName }}
-
+
+ {{ channelName }} -
+
+
+ {{ channelName }} -
+
+
- - {{ currentVideoIndex }} / {{ playlistVideoCount }}
+ {{ currentVideoIndexOneBased }} / {{ playlistVideoCount }}
@@ -114,13 +118,13 @@
>
-
+
+
-
-
-
+
diff --git a/src/renderer/views/Popular/Popular.js b/src/renderer/views/Popular/Popular.js
index 08a1a893ca8ae..1c0dc544ad421 100644
--- a/src/renderer/views/Popular/Popular.js
+++ b/src/renderer/views/Popular/Popular.js
@@ -82,6 +82,7 @@ export default defineComponent({
switch (event.key) {
case 'r':
case 'R':
+ case 'F5':
if (!this.isLoading) {
this.fetchPopularInfo()
}
diff --git a/src/renderer/views/ProfileEdit/ProfileEdit.js b/src/renderer/views/ProfileEdit/ProfileEdit.js
deleted file mode 100644
index 1987f62f201da..0000000000000
--- a/src/renderer/views/ProfileEdit/ProfileEdit.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import { defineComponent } from 'vue'
-import { mapGetters } from 'vuex'
-import FtLoader from '../../components/ft-loader/ft-loader.vue'
-import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
-import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
-import FtProfileFilterChannelsList from '../../components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue'
-import { MAIN_PROFILE_ID } from '../../../constants'
-import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
-import { showToast } from '../../helpers/utils'
-
-export default defineComponent({
- name: 'ProfileEdit',
- components: {
- 'ft-loader': FtLoader,
- 'ft-profile-edit': FtProfileEdit,
- 'ft-profile-channel-list': FtProfileChannelList,
- 'ft-profile-filter-channels-list': FtProfileFilterChannelsList
- },
- data: function () {
- return {
- isLoading: true,
- isNew: false,
- profileId: '',
- profile: {}
- }
- },
- computed: {
- ...mapGetters([
- 'profileById'
- ]),
-
- profileList: function () {
- return this.$store.getters.getProfileList
- },
-
- isMainProfile: function () {
- return this.profileId === MAIN_PROFILE_ID
- }
- },
- watch: {
- profileList: {
- handler: function () {
- const profile = this.profileById(this.profileId)
- if (!profile) {
- showToast(this.$t('Profile.Profile could not be found'))
- this.$router.push({
- path: '/settings/profile/'
- })
- }
- this.profile = profile
- },
- deep: true
- }
- },
- mounted: function () {
- const profileType = this.$route.name
-
- this.deletePromptLabel = `${this.$t('Profile.Are you sure you want to delete this profile?')} ${this.$t('Profile["All subscriptions will also be deleted."]')}`
-
- if (profileType === 'newProfile') {
- this.isNew = true
- const bgColor = getRandomColor()
- const textColor = calculateColorLuminance(bgColor)
- this.profile = {
- name: '',
- bgColor: bgColor,
- textColor: textColor,
- subscriptions: []
- }
- } else {
- this.isNew = false
- this.profileId = this.$route.params.id
-
- const profile = this.profileById(this.profileId)
- if (!profile) {
- showToast(this.$t('Profile.Profile could not be found'))
- this.$router.push({
- path: '/settings/profile/'
- })
- }
- this.profile = profile
- }
-
- this.isLoading = false
- }
-})
diff --git a/src/renderer/views/ProfileEdit/ProfileEdit.vue b/src/renderer/views/ProfileEdit/ProfileEdit.vue
deleted file mode 100644
index a5e7f061d2455..0000000000000
--- a/src/renderer/views/ProfileEdit/ProfileEdit.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
+
diff --git a/src/renderer/views/Settings/Settings.css b/src/renderer/views/Settings/Settings.css
index 66e3da51b2487..42f5502d04152 100644
--- a/src/renderer/views/Settings/Settings.css
+++ b/src/renderer/views/Settings/Settings.css
@@ -1,8 +1,23 @@
hr {
- block-size: 2px;
inline-size: 85%;
margin-block: 0;
margin-inline: auto;
border: 0;
- background-color: var(--scrollbar-color-hover);
+ border-block-start: 2px solid var(--scrollbar-color-hover);
+}
+
+@media only screen and (max-width: 800px) {
+ hr {
+ inline-size: 100%;
+ }
+}
+
+.switchColumnGrid {
+ inline-size: 85%;
+ margin-inline: auto;
+}
+
+.settingsToggle {
+ padding-block: 0;
+ margin-block: 10px 5px;
}
diff --git a/src/renderer/views/Settings/Settings.js b/src/renderer/views/Settings/Settings.js
index b208bc265564f..f7dc155cdd6f8 100644
--- a/src/renderer/views/Settings/Settings.js
+++ b/src/renderer/views/Settings/Settings.js
@@ -1,4 +1,5 @@
import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
import GeneralSettings from '../../components/general-settings/general-settings.vue'
import ThemeSettings from '../../components/theme-settings/theme-settings.vue'
import PlayerSettings from '../../components/player-settings/player-settings.vue'
@@ -14,6 +15,7 @@ import ParentControlSettings from '../../components/parental-control-settings/pa
import ExperimentalSettings from '../../components/experimental-settings/experimental-settings.vue'
import PasswordSettings from '../../components/password-settings/password-settings.vue'
import PasswordDialog from '../../components/password-dialog/password-dialog.vue'
+import FtToggleSwitch from '../../components/ft-toggle-switch/ft-toggle-switch.vue'
export default defineComponent({
name: 'Settings',
@@ -33,6 +35,7 @@ export default defineComponent({
'experimental-settings': ExperimentalSettings,
'password-settings': PasswordSettings,
'password-dialog': PasswordDialog,
+ 'ft-toggle-switch': FtToggleSwitch
},
data: function () {
return {
@@ -46,11 +49,20 @@ export default defineComponent({
settingsPassword: function () {
return this.$store.getters.getSettingsPassword
- }
+ },
+
+ allSettingsSectionsExpandedByDefault: function () {
+ return this.$store.getters.getAllSettingsSectionsExpandedByDefault
+ },
},
created: function () {
if (this.settingsPassword === '') {
this.unlocked = true
}
+ },
+ methods: {
+ ...mapActions([
+ 'updateAllSettingsSectionsExpandedByDefault',
+ ])
}
})
diff --git a/src/renderer/views/Settings/Settings.vue b/src/renderer/views/Settings/Settings.vue
index 0109b54cdd097..04f83fabf0b90 100644
--- a/src/renderer/views/Settings/Settings.vue
+++ b/src/renderer/views/Settings/Settings.vue
@@ -1,6 +1,17 @@
+
-
+ - {{ index + 1 }} -
-
+
+
+ + {{ index + 1 }} +
+
+
+
-
-
-
-
-
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.css b/src/renderer/views/ProfileSettings/ProfileSettings.css
index 6a6ef39e2dba5..8c568da7bc3fc 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.css
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.css
@@ -1,7 +1,5 @@
-.card {
- inline-size: 85%;
- margin-block: 0 60px;
- margin-inline: auto;
+h2 {
+ text-align: center;
}
.message {
@@ -14,6 +12,23 @@
margin-inline: auto;
}
+.profileList > .openedProfile {
+ background-color: var(--primary-text-color);
+ transition: background 0.2s ease-out;
+ color: var(--card-bg-color);
+}
+
+.profileList > .openedProfile:hover, .profileList > .openedProfile:focus-visible {
+ background-color: var(--tertiary-text-color);
+ transition: background 0.2s ease-in;
+}
+
+.card {
+ inline-size: 85%;
+ margin-block: 0 15px;
+ margin-inline: auto;
+}
+
@media only screen and (max-width: 680px) {
.card {
inline-size: 90%;
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.js b/src/renderer/views/ProfileSettings/ProfileSettings.js
index 0324f46087cc3..561f3191857b3 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.js
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.js
@@ -1,8 +1,15 @@
import { defineComponent } from 'vue'
+import { mapGetters } from 'vuex'
import FtCard from '../../components/ft-card/ft-card.vue'
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
import FtProfileBubble from '../../components/ft-profile-bubble/ft-profile-bubble.vue'
import FtButton from '../../components/ft-button/ft-button.vue'
+import FtLoader from '../../components/ft-loader/ft-loader.vue'
+import FtProfileEdit from '../../components/ft-profile-edit/ft-profile-edit.vue'
+import FtProfileChannelList from '../../components/ft-profile-channel-list/ft-profile-channel-list.vue'
+import FtProfileFilterChannelsList from '../../components/ft-profile-filter-channels-list/ft-profile-filter-channels-list.vue'
+import { calculateColorLuminance, getRandomColor } from '../../helpers/colors'
+import { MAIN_PROFILE_ID } from '../../../constants'
export default defineComponent({
name: 'ProfileSettings',
@@ -10,18 +17,74 @@ export default defineComponent({
'ft-card': FtCard,
'ft-flex-box': FtFlexBox,
'ft-profile-bubble': FtProfileBubble,
- 'ft-button': FtButton
+ 'ft-button': FtButton,
+ 'ft-loader': FtLoader,
+ 'ft-profile-edit': FtProfileEdit,
+ 'ft-profile-channel-list': FtProfileChannelList,
+ 'ft-profile-filter-channels-list': FtProfileFilterChannelsList
+ },
+ data: function () {
+ return {
+ isNewProfileOpen: false,
+ openSettingsProfileId: null,
+ openSettingsProfile: null
+ }
},
computed: {
+ ...mapGetters([
+ 'profileById'
+ ]),
profileList: function () {
return this.$store.getters.getProfileList
+ },
+ isMainProfile: function () {
+ return this.openSettingsProfileId === MAIN_PROFILE_ID
+ }
+ },
+ watch: {
+ profileList: {
+ handler: function () {
+ this.openSettingsProfile = this.getProfileById(this.openSettingsProfileId)
+ },
+ deep: true
}
},
methods: {
- newProfile: function () {
- this.$router.push({
- path: '/settings/profile/new/'
- })
+ openSettingsForNewProfile: function () {
+ this.isNewProfileOpen = true
+ const bgColor = getRandomColor()
+ const textColor = calculateColorLuminance(bgColor)
+ this.openSettingsProfile = {
+ name: '',
+ bgColor: bgColor,
+ textColor: textColor,
+ subscriptions: []
+ }
+ this.openSettingsProfileId = -1
+ },
+ openSettingsForProfileWithId: function (profileId) {
+ if (this.profileId === this.openSettingsProfileId) {
+ return
+ }
+ this.isNewProfileOpen = false
+ this.openSettingsProfileId = profileId
+ this.openSettingsProfile = this.getProfileById(profileId)
+ },
+ getProfileById: function (profileId) {
+ if (!profileId) {
+ return null
+ }
+
+ return this.profileById(profileId)
+ },
+ handleNewProfileCreated: function () {
+ this.isNewProfileOpen = false
+ this.openSettingsProfile = null
+ this.openSettingsProfileId = -1
+ },
+ handleProfileDeleted: function () {
+ this.openSettingsProfile = null
+ this.openSettingsProfileId = -1
}
}
})
diff --git a/src/renderer/views/ProfileSettings/ProfileSettings.vue b/src/renderer/views/ProfileSettings/ProfileSettings.vue
index 4ddcefc174361..76b737d2ee31e 100644
--- a/src/renderer/views/ProfileSettings/ProfileSettings.vue
+++ b/src/renderer/views/ProfileSettings/ProfileSettings.vue
@@ -12,15 +12,39 @@
:profile-name="profile.name"
:background-color="profile.bgColor"
:text-color="profile.textColor"
+ :class="{ openedProfile: openSettingsProfile?._id === profile._id }"
+ @click="openSettingsForProfileWithId(profile._id)"
/>
-
-
+
+
diff --git a/src/renderer/views/Trending/Trending.js b/src/renderer/views/Trending/Trending.js
index d308c9c88c7ff..b84c117db07bd 100644
--- a/src/renderer/views/Trending/Trending.js
+++ b/src/renderer/views/Trending/Trending.js
@@ -183,6 +183,7 @@ export default defineComponent({
switch (event.key) {
case 'r':
case 'R':
+ case 'F5':
if (!this.isLoading) {
this.getTrendingInfo(true)
}
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.css b/src/renderer/views/UserPlaylists/UserPlaylists.css
index 8885b1123ddfb..c7cea712b6be2 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.css
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.css
@@ -1,9 +1,26 @@
.card {
+ position: relative;
+
inline-size: 85%;
margin-block: 0 60px;
margin-inline: auto;
}
+.headingText {
+ display: inline-block;
+}
+
+.newPlaylistButton {
+ margin-inline-start: 0.5em;
+ display: inline-block;
+ vertical-align: middle;
+}
+
+.sortSelect {
+ /* Put it on the right */
+ margin-inline-start: auto;
+}
+
.message {
color: var(--tertiary-text-color);
}
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.js b/src/renderer/views/UserPlaylists/UserPlaylists.js
index b3477dbc13657..95e2d01c862cc 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.js
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.js
@@ -1,12 +1,29 @@
import { defineComponent } from 'vue'
+import { mapActions } from 'vuex'
import debounce from 'lodash.debounce'
import FtCard from '../../components/ft-card/ft-card.vue'
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
import FtTooltip from '../../components/ft-tooltip/ft-tooltip.vue'
import FtLoader from '../../components/ft-loader/ft-loader.vue'
import FtButton from '../../components/ft-button/ft-button.vue'
+import FtSelect from '../../components/ft-select/ft-select.vue'
import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
import FtInput from '../../components/ft-input/ft-input.vue'
+import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
+
+const SORT_BY_VALUES = {
+ NameAscending: 'name_ascending',
+ NameDescending: 'name_descending',
+
+ LatestCreatedFirst: 'latest_created_first',
+ EarliestCreatedFirst: 'earliest_created_first',
+
+ LatestUpdatedFirst: 'latest_updated_first',
+ EarliestUpdatedFirst: 'earliest_updated_first',
+
+ LatestPlayedFirst: 'latest_played_first',
+ EarliestPlayedFirst: 'earliest_played_first',
+}
export default defineComponent({
name: 'UserPlaylists',
@@ -16,8 +33,10 @@ export default defineComponent({
'ft-tooltip': FtTooltip,
'ft-loader': FtLoader,
'ft-button': FtButton,
+ 'ft-select': FtSelect,
'ft-element-list': FtElementList,
- 'ft-input': FtInput
+ 'ft-icon-button': FtIconButton,
+ 'ft-input': FtInput,
},
data: function () {
return {
@@ -27,46 +46,147 @@ export default defineComponent({
showLoadMoreButton: false,
query: '',
activeData: [],
+ sortBy: SORT_BY_VALUES.LatestPlayedFirst,
}
},
computed: {
- favoritesPlaylist: function () {
- return this.$store.getters.getFavorites
+ locale: function () {
+ return this.$i18n.locale.replace('_', '-')
+ },
+
+ allPlaylists: function () {
+ const playlists = this.$store.getters.getAllPlaylists
+ return [].concat(playlists).sort((a, b) => {
+ switch (this.sortBy) {
+ case SORT_BY_VALUES.NameAscending:
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ case SORT_BY_VALUES.NameDescending:
+ return b.playlistName.localeCompare(a.playlistName, this.locale)
+ case SORT_BY_VALUES.LatestCreatedFirst: {
+ if (a.createdAt > b.createdAt) { return -1 }
+ if (a.createdAt < b.createdAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.EarliestCreatedFirst: {
+ if (a.createdAt < b.createdAt) { return -1 }
+ if (a.createdAt > b.createdAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.LatestUpdatedFirst: {
+ if (a.lastUpdatedAt > b.lastUpdatedAt) { return -1 }
+ if (a.lastUpdatedAt < b.lastUpdatedAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.EarliestUpdatedFirst: {
+ if (a.lastUpdatedAt < b.lastUpdatedAt) { return -1 }
+ if (a.lastUpdatedAt > b.lastUpdatedAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.LatestPlayedFirst: {
+ if (a.lastPlayedAt == null && b.lastPlayedAt == null) {
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ // Never played playlist = move to last
+ if (a.lastPlayedAt == null) { return 1 }
+ if (b.lastPlayedAt == null) { return -1 }
+ if (a.lastPlayedAt > b.lastPlayedAt) { return -1 }
+ if (a.lastPlayedAt < b.lastPlayedAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ case SORT_BY_VALUES.EarliestPlayedFirst: {
+ // Never played playlist = first
+ if (a.lastPlayedAt == null && b.lastPlayedAt == null) {
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ // Never played playlist = move to first
+ if (a.lastPlayedAt == null) { return -1 }
+ if (b.lastPlayedAt == null) { return 1 }
+ if (a.lastPlayedAt < b.lastPlayedAt) { return -1 }
+ if (a.lastPlayedAt > b.lastPlayedAt) { return 1 }
+
+ return a.playlistName.localeCompare(b.playlistName, this.locale)
+ }
+ default:
+ console.error(`Unknown sortBy: ${this.sortBy}`)
+ return 0
+ }
+ })
},
fullData: function () {
- const data = [].concat(this.favoritesPlaylist.videos).reverse()
- if (this.favoritesPlaylist.videos.length < this.dataLimit) {
+ const data = this.allPlaylists
+ if (this.allPlaylists.length < this.dataLimit) {
return data
} else {
return data.slice(0, this.dataLimit)
}
- }
+ },
+
+ lowerCaseQuery: function() {
+ return this.query.toLowerCase()
+ },
+
+ sortBySelectNames() {
+ return Object.values(SORT_BY_VALUES).map((k) => {
+ switch (k) {
+ case SORT_BY_VALUES.NameAscending:
+ return this.$t('User Playlists.Sort By.NameAscending')
+ case SORT_BY_VALUES.NameDescending:
+ return this.$t('User Playlists.Sort By.NameDescending')
+ case SORT_BY_VALUES.LatestCreatedFirst:
+ return this.$t('User Playlists.Sort By.LatestCreatedFirst')
+ case SORT_BY_VALUES.EarliestCreatedFirst:
+ return this.$t('User Playlists.Sort By.EarliestCreatedFirst')
+ case SORT_BY_VALUES.LatestUpdatedFirst:
+ return this.$t('User Playlists.Sort By.LatestUpdatedFirst')
+ case SORT_BY_VALUES.EarliestUpdatedFirst:
+ return this.$t('User Playlists.Sort By.EarliestUpdatedFirst')
+ case SORT_BY_VALUES.LatestPlayedFirst:
+ return this.$t('User Playlists.Sort By.LatestPlayedFirst')
+ case SORT_BY_VALUES.EarliestPlayedFirst:
+ return this.$t('User Playlists.Sort By.EarliestPlayedFirst')
+ default:
+ console.error(`Unknown sortBy: ${k}`)
+ return k
+ }
+ })
+ },
+ sortBySelectValues() {
+ return Object.values(SORT_BY_VALUES)
+ },
},
watch: {
- query() {
+ lowerCaseQuery() {
this.searchDataLimit = 100
this.filterPlaylistAsync()
},
fullData() {
this.activeData = this.fullData
this.filterPlaylist()
- }
+ },
+ sortBy() {
+ sessionStorage.setItem('UserPlaylists/sortBy', this.sortBy)
+ },
},
mounted: function () {
const limit = sessionStorage.getItem('favoritesLimit')
-
if (limit !== null) {
this.dataLimit = limit
}
+ const sortBy = sessionStorage.getItem('UserPlaylists/sortBy')
+ if (sortBy != null) {
+ this.sortBy = sortBy
+ }
+
this.activeData = this.fullData
- if (this.activeData.length < this.favoritesPlaylist.videos.length) {
- this.showLoadMoreButton = true
- } else {
- this.showLoadMoreButton = false
- }
+ this.showLoadMoreButton = this.activeData.length < this.allPlaylists.length
this.filterPlaylistDebounce = debounce(this.filterPlaylist, 500)
},
@@ -86,31 +206,28 @@ export default defineComponent({
this.filterPlaylistDebounce()
},
filterPlaylist: function() {
- if (this.query === '') {
+ if (this.lowerCaseQuery === '') {
this.activeData = this.fullData
- if (this.activeData.length < this.favoritesPlaylist.videos.length) {
- this.showLoadMoreButton = true
- } else {
- this.showLoadMoreButton = false
- }
+ this.showLoadMoreButton = this.allPlaylists.length > this.activeData.length
} else {
- const lowerCaseQuery = this.query.toLowerCase()
- const filteredQuery = this.favoritesPlaylist.videos.filter((video) => {
- if (typeof (video.title) !== 'string' || typeof (video.author) !== 'string') {
- return false
- } else {
- return video.title.toLowerCase().includes(lowerCaseQuery) || video.author.toLowerCase().includes(lowerCaseQuery)
- }
- }).sort((a, b) => {
- return b.timeAdded - a.timeAdded
+ const filteredPlaylists = this.allPlaylists.filter((playlist) => {
+ if (typeof (playlist.playlistName) !== 'string') { return false }
+
+ return playlist.playlistName.toLowerCase().includes(this.lowerCaseQuery)
})
- if (filteredQuery.length <= this.searchDataLimit) {
- this.showLoadMoreButton = false
- } else {
- this.showLoadMoreButton = true
- }
- this.activeData = filteredQuery.length < this.searchDataLimit ? filteredQuery : filteredQuery.slice(0, this.searchDataLimit)
+ this.showLoadMoreButton = filteredPlaylists.length > this.searchDataLimit
+ this.activeData = filteredPlaylists.length < this.searchDataLimit ? filteredPlaylists : filteredPlaylists.slice(0, this.searchDataLimit)
}
},
+
+ createNewPlaylist: function () {
+ this.showCreatePlaylistPrompt({
+ title: '',
+ })
+ },
+
+ ...mapActions([
+ 'showCreatePlaylistPrompt'
+ ])
}
})
diff --git a/src/renderer/views/UserPlaylists/UserPlaylists.vue b/src/renderer/views/UserPlaylists/UserPlaylists.vue
index 965e61d00cc02..3735dfaef2f17 100644
--- a/src/renderer/views/UserPlaylists/UserPlaylists.vue
+++ b/src/renderer/views/UserPlaylists/UserPlaylists.vue
@@ -1,47 +1,61 @@
+
+
+