Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update subscription view to be able to load videos from video cache again #3665

Closed
wants to merge 1 commit into from
Closed

Update subscription view to be able to load videos from video cache again #3665

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 2 additions & 8 deletions src/renderer/components/privacy-settings/privacy-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,12 +110,7 @@ export default defineComponent({
}
})

this.updateAllSubscriptionsList([])
this.updateProfileSubscriptions({
activeProfile: MAIN_PROFILE_ID,
videoList: [],
errorChannels: []
})
this.clearSubscriptionsCache()
}
},

Expand All @@ -129,8 +124,7 @@ export default defineComponent({
'updateProfile',
'removeProfile',
'updateActiveProfile',
'updateAllSubscriptionsList',
'updateProfileSubscriptions'
'clearSubscriptionsCache',
])
}
})
74 changes: 53 additions & 21 deletions src/renderer/store/modules/subscriptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,71 @@
import { MAIN_PROFILE_ID } from '../../../constants'

const state = {
allSubscriptionsList: [],
profileSubscriptions: {
activeProfile: MAIN_PROFILE_ID,
const defaultState = {
subscriptionsCacheForAllSubscriptionsProfile: {
videoList: [],
},
subscriptionsCacheForActiveProfile: {
videoList: [],
errorChannels: []
}
profileID: '',
errorChannels: [],
},
}

function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj))
}

const state = {
subscriptionsCacheForAllSubscriptionsProfile: deepCopy(defaultState.subscriptionsCacheForAllSubscriptionsProfile),
subscriptionsCacheForActiveProfile: deepCopy(defaultState.subscriptionsCacheForActiveProfile),
}

const getters = {
getAllSubscriptionsList: () => {
return state.allSubscriptionsList
getSubscriptionsCacheForAllSubscriptionsProfile: () => {
return state.subscriptionsCacheForAllSubscriptionsProfile
},
getSubscriptionsCacheForProfile: (state) => (profileId) => {
if (state.subscriptionsCacheForActiveProfile.profileID !== profileId) { return null }

return state.subscriptionsCacheForActiveProfile
},
getProfileSubscriptions: () => {
return state.profileSubscriptions
}
}

const actions = {
updateAllSubscriptionsList ({ commit }, subscriptions) {
commit('setAllSubscriptionsList', subscriptions)
updateSubscriptionsCacheForActiveProfile: ({ commit }, payload) => {
if (payload.profileID === MAIN_PROFILE_ID) {
commit('updateSubscriptionsCacheForAllSubscriptionsProfile', {
videoList: payload.videoList,
})
} else {
// When cache for a non default profile (the one for all subscriptions) updated
// The cache for all subscriptions could be stale at that point
commit('clearSubscriptionsCacheForAllSubscriptionsProfile')
}

commit('updateSubscriptionsCacheForActiveProfile', payload)
},
clearSubscriptionsCache: ({ commit }) => {
commit('clearSubscriptionsCacheForAllSubscriptionsProfile')
commit('clearSubscriptionsCacheForActiveProfile')
},
updateProfileSubscriptions ({ commit }, subscriptions) {
commit('setProfileSubscriptions', subscriptions)
}
}

const mutations = {
setAllSubscriptionsList (state, allSubscriptionsList) {
state.allSubscriptionsList = allSubscriptionsList
updateSubscriptionsCacheForAllSubscriptionsProfile (state, { videoList }) {
state.subscriptionsCacheForAllSubscriptionsProfile.videoList = videoList
},
updateSubscriptionsCacheForActiveProfile (state, { profileID, videoList, errorChannels }) {
state.subscriptionsCacheForActiveProfile.profileID = profileID
state.subscriptionsCacheForActiveProfile.videoList = videoList
state.subscriptionsCacheForActiveProfile.errorChannels = errorChannels
},
clearSubscriptionsCacheForAllSubscriptionsProfile (state) {
state.subscriptionsCacheForAllSubscriptionsProfile = deepCopy(defaultState.subscriptionsCacheForAllSubscriptionsProfile)
},
clearSubscriptionsCacheForActiveProfile (state) {
state.subscriptionsCacheForActiveProfile = deepCopy(defaultState.subscriptionsCacheForActiveProfile)
},
setProfileSubscriptions (state, profileSubscriptions) {
state.profileSubscriptions = profileSubscriptions
}
}

export default {
Expand Down
159 changes: 87 additions & 72 deletions src/renderer/views/Subscriptions/Subscriptions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default defineComponent({
dataLimit: 100,
videoList: [],
errorChannels: [],
attemptedFetch: false
attemptedFetch: false,
}
},
computed: {
Expand Down Expand Up @@ -65,13 +65,24 @@ export default defineComponent({
activeProfile: function () {
return this.$store.getters.getActiveProfile
},
activeProfileId: function () {
return this.activeProfile._id
},

subscriptionsCacheForAllSubscriptionsProfile: function () {
return this.$store.getters.getSubscriptionsCacheForAllSubscriptionsProfile
},
videoCacheForAllSubscriptionsProfilePresent: function () {
return this.subscriptionsCacheForAllSubscriptionsProfile.videoList.length > 0
},

profileSubscriptions: function () {
return this.$store.getters.getProfileSubscriptions
subscriptionsCacheForActiveProfile: function () {
return this.$store.getters.getSubscriptionsCacheForProfile(this.activeProfile._id)
},
videoCacheForActiveProfilePresent: function () {
if (this.subscriptionsCacheForActiveProfile == null) { return false }

allSubscriptionsList: function () {
return this.$store.getters.getAllSubscriptionsList
return this.subscriptionsCacheForActiveProfile.videoList.length > 0
},

historyCache: function () {
Expand All @@ -92,12 +103,13 @@ export default defineComponent({

fetchSubscriptionsAutomatically: function() {
return this.$store.getters.getFetchSubscriptionsAutomatically
}
},
},
watch: {
activeProfile: async function (_) {
this.getProfileSubscriptions()
}
this.isLoading = true
this.loadVideosFromCacheSometimes()
},
},
mounted: async function () {
document.addEventListener('keydown', this.keyboardShortcutHandler)
Expand All @@ -108,43 +120,70 @@ export default defineComponent({
this.dataLimit = dataLimit
}

if (this.profileSubscriptions.videoList.length !== 0) {
if (this.profileSubscriptions.activeProfile === this.activeProfile._id) {
const subscriptionList = JSON.parse(JSON.stringify(this.profileSubscriptions))
if (this.hideWatchedSubs) {
this.videoList = await Promise.all(subscriptionList.videoList.filter((video) => {
const historyIndex = this.historyCache.findIndex((x) => {
return x.videoId === video.videoId
})

return historyIndex === -1
}))
} else {
this.videoList = subscriptionList.videoList
this.errorChannels = subscriptionList.errorChannels
}
} else {
this.getProfileSubscriptions()
}

this.isLoading = false
} else if (this.fetchSubscriptionsAutomatically) {
setTimeout(async () => {
this.getSubscriptions()
}, 300)
} else {
this.isLoading = false
}
this.loadVideosFromCacheSometimes()
},
beforeDestroy: function () {
document.removeEventListener('keydown', this.keyboardShortcutHandler)
},
methods: {
loadVideosFromCacheSometimes() {
// Called on view visible (initial view rendering, tab switching, etc.)
if (this.videoCacheForActiveProfilePresent) {
this.loadVideosFromCacheForActiveProfile()
return
}

if (this.videoCacheForAllSubscriptionsProfilePresent) {
this.loadVideosFromCacheForAllSubscriptionsProfile()
return
}

this.maybeLoadVideosForSubscriptionsFromRemote()
},

async loadVideosFromCacheForActiveProfile() {
const subscriptionList = JSON.parse(JSON.stringify(this.subscriptionsCacheForActiveProfile))
this.errorChannels = subscriptionList.errorChannels
if (this.hideWatchedSubs) {
this.videoList = await Promise.all(subscriptionList.videoList.filter((video) => {
const historyIndex = this.historyCache.findIndex((x) => {
return x.videoId === video.videoId
})

return historyIndex === -1
}))
} else {
this.videoList = subscriptionList.videoList
}
this.isLoading = false
},

async loadVideosFromCacheForAllSubscriptionsProfile() {
const cachedVideosFromAllSubscriptions = this.subscriptionsCacheForAllSubscriptionsProfile.videoList
// Load videos from cached videos for all subscriptions
this.videoList = await Promise.all(cachedVideosFromAllSubscriptions.filter((video) => {
const channelIndex = this.activeSubscriptionList.findIndex((subscribedChannel) => {
return subscribedChannel.id === video.authorId
})

if (this.hideWatchedSubs) {
const historyIndex = this.historyCache.findIndex((x) => {
return x.videoId === video.videoId
})

return channelIndex !== -1 && historyIndex === -1
} else {
return channelIndex !== -1
}
}))
this.isLoading = false
},

goToChannel: function (id) {
this.$router.push({ path: `/channel/${id}` })
},

getSubscriptions: function () {
loadVideosForSubscriptionsFromRemote: function () {
if (this.activeSubscriptionList.length === 0) {
this.isLoading = false
this.videoList = []
Expand Down Expand Up @@ -209,11 +248,6 @@ export default defineComponent({
return item.durationText !== 'PREMIERE'
})
}
const profileSubscriptions = {
activeProfile: this.activeProfile._id,
videoList: videoList,
errorChannels: this.errorChannels
}

this.videoList = await Promise.all(videoList.filter((video) => {
if (this.hideWatchedSubs) {
Expand All @@ -226,43 +260,25 @@ export default defineComponent({
return true
}
}))
this.updateProfileSubscriptions(profileSubscriptions)
this.updateSubscriptionsCacheForActiveProfile({
profileID: this.activeProfileId,
videoList: videoList,
errorChannels: this.errorChannels,
})
this.isLoading = false
this.updateShowProgressBar(false)

if (this.activeProfile === MAIN_PROFILE_ID) {
this.updateAllSubscriptionsList(profileSubscriptions.videoList)
}
}
})
},

getProfileSubscriptions: async function () {
if (this.allSubscriptionsList.length !== 0) {
this.isLoading = true
this.videoList = await Promise.all(this.allSubscriptionsList.filter((video) => {
const channelIndex = this.activeSubscriptionList.findIndex((x) => {
return x.id === video.authorId
})

if (this.hideWatchedSubs) {
const historyIndex = this.historyCache.findIndex((x) => {
return x.videoId === video.videoId
})

return channelIndex !== -1 && historyIndex === -1
} else {
return channelIndex !== -1
}
}))
this.isLoading = false
} else if (this.fetchSubscriptionsAutomatically) {
this.getSubscriptions()
} else if (this.activeProfile._id === this.profileSubscriptions.activeProfile) {
this.videoList = this.profileSubscriptions.videoList
maybeLoadVideosForSubscriptionsFromRemote: async function () {
if (this.fetchSubscriptionsAutomatically) {
// `this.isLoading = false` is called inside `loadVideosForSubscriptionsFromRemote` when needed
this.loadVideosForSubscriptionsFromRemote()
} else {
this.videoList = []
this.attemptedFetch = false
this.isLoading = false
}
},

Expand Down Expand Up @@ -476,16 +492,15 @@ export default defineComponent({
case 'r':
case 'R':
if (!this.isLoading) {
this.getSubscriptions()
this.loadVideosForSubscriptionsFromRemote()
}
break
}
},

...mapActions([
'updateShowProgressBar',
'updateProfileSubscriptions',
'updateAllSubscriptionsList'
'updateSubscriptionsCacheForActiveProfile',
]),

...mapMutations([
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/views/Subscriptions/Subscriptions.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@
:title="$t('Subscriptions.Refresh Subscriptions')"
:size="12"
theme="primary"
@click="getSubscriptions"
@click="loadVideosForSubscriptionsFromRemote"
/>
</div>
</template>
Expand Down