From 005a8ed44411cfc73d44f5fda5706f0df9d0d396 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 22 Oct 2021 08:09:04 +0530 Subject: [PATCH 01/11] Start restructuring the code --- package.json | 1 + src/App.vue | 2 +- src/components/Player.vue | 2 +- src/routes/Preferences.vue | 2 +- src/routes/TrendingPage.vue | 2 +- src/routes/WatchVideo.vue | 13 +-- src/store/authentication-store.js | 47 +++++++++++ src/store/index.js | 131 ++---------------------------- src/store/prefs-store.js | 75 +++++++++++++++++ yarn.lock | 12 +++ 10 files changed, 152 insertions(+), 135 deletions(-) create mode 100644 src/store/authentication-store.js create mode 100644 src/store/prefs-store.js diff --git a/package.json b/package.json index 78a06c8..0b1c27b 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "dependencies": { "@babel/eslint-parser": "^7.15.0", "@fontsource/hind-siliguri": "^4.5.0", + "axios": "^0.23.0", "core-js": "^3.16.1", "dompurify": "^2.3.1", "hotkeys-js": "^3.8.7", diff --git a/src/App.vue b/src/App.vue index f336b19..9227a2f 100644 --- a/src/App.vue +++ b/src/App.vue @@ -133,7 +133,7 @@ export default { } }, created () { - this.$store.dispatch('loadState') + this.$store.dispatch('prefs/loadState') } } diff --git a/src/components/Player.vue b/src/components/Player.vue index 01c26ed..46a3505 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -55,7 +55,7 @@ export default { }, computed: { shouldAutoPlay () { - return this.$store.getters.getPreferenceBoolean('playerAutoPlay', true) + return this.$store.getters['prefs/getPreferenceBoolean']('playerAutoPlay', true) }, preferredVideoCodecs () { diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue index 1237c51..d05de70 100644 --- a/src/routes/Preferences.vue +++ b/src/routes/Preferences.vue @@ -4,7 +4,7 @@
- +

{{ $t('preferences.' + opt.id) }}


{{ $t('actions.instances_list') }}
diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue index 63abc14..ed9e779 100644 --- a/src/routes/TrendingPage.vue +++ b/src/routes/TrendingPage.vue @@ -31,7 +31,7 @@ export default { }, mounted () { - const region = this.$store.getters.getPreferenceString('region', 'US') + const region = this.$store.getters.getPreference('region', 'US') this.fetchTrending(region).then(videos => (this.videos = videos)) }, diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue index 0f13784..e2eb2a5 100644 --- a/src/routes/WatchVideo.vue +++ b/src/routes/WatchVideo.vue @@ -5,7 +5,7 @@ :video="video" :skip-to-time="'t' in $route.query ? Number($route.query.t) : null" :sponsors="sponsors" - :selectedAutoPlay="this.$store.getters.getPreferenceBoolean('autoplay')" + :selectedAutoPlay="$store.getters['prefs/getPreferenceBoolean']('autoplay')" :selectedAutoLoop="selectedAutoLoop" @videoEnded="videoEnded" /> @@ -135,7 +135,7 @@ export default { initialize () { this.getVideoData() this.getSponsors() - if (this.$store.getters.getPreferenceBoolean('comments', true)) this.getComments() + if (this.$store.getters['prefs/getPreferenceBoolean']('comments', true)) this.getComments() }, videoEnded () { @@ -158,18 +158,19 @@ export default { }, fetchVideo () { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { + method: 'GET', path: '/streams/' + this.getVideoId() }) }, async fetchSponsors () { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { path: '/sponsors/' + this.getVideoId(), params: { category: '["' + - this.$store.getters.getPreferenceString('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll( + this.$store.getters.getPreference('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll( ',', '","' ) + @@ -231,7 +232,7 @@ export default { }) }, async getSponsors () { - if (this.$store.getters.getPreferenceString('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) } + if (this.$store.getters.getPreference('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) } }, async getComments () { this.fetchComments().then(data => (this.comments = data)) diff --git a/src/store/authentication-store.js b/src/store/authentication-store.js new file mode 100644 index 0000000..20f77a7 --- /dev/null +++ b/src/store/authentication-store.js @@ -0,0 +1,47 @@ +import axios from 'axios' +import { isPlainObject } from 'lodash-es' + +const AuthenticationStore = { + namespaced: true, + + state: () => ({ + isAuthenticated: true, + authToken: null + }), + + actions: { + async makeRequest ({ + commit, + state, + rootGetters + }, { + path, + method, + data, + params + }) { + if (state.isAuthenticated) { + if (isPlainObject(params)) { + params.authToken = state.authToken + } else { + params = { + authToken: state.authToken + } + } + } + + const { data: resp } = await axios({ + baseURL: rootGetters['prefs/apiUrl'], + method, + url: path, + params + }) + + return resp + } + } +} + +export { + AuthenticationStore +} diff --git a/src/store/index.js b/src/store/index.js index 116d421..2ca419f 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,139 +1,20 @@ import Vue from 'vue' import Vuex from 'vuex' +import { isPlainObject } from 'lodash-es' -import { get as _get, keys as _keys, set as _set, cloneDeep as _cloneDeep, isPlainObject, isString } from 'lodash-es' +import { PrefsStore } from '@/store/prefs-store' +import { AuthenticationStore } from '@/store/authentication-store' Vue.use(Vuex) const store = new Vuex.Store({ - state: { - isAuthenticated: false, - prefs: {} - }, - mutations: { - setAuthenticated (state, authStatus) { - state.isAuthenticated = authStatus - }, - setPrefs (state, { - id, - value - }) { - const clonedPrefs = _cloneDeep(state.prefs) - _set(clonedPrefs, id, value) - state.prefs = clonedPrefs - }, - - replacePrefs (state, nextPrefs) { - state.prefs = nextPrefs - } - }, - actions: { - loadState ({ commit }) { - try { - const jv = window.localStorage.getItem('PREFERENCES') - if (isString(jv) && jv.length !== 0) { - const p = JSON.parse(jv) - commit('replacePrefs', p) - } - } catch (e) { - console.log('Error:', e) - } - }, - - fetchJson ({ getters }, { - path, - params = {}, - options = {} - }) { - const url = new URL(getters.apiUrl) - - url.pathname = path - if (params) { - for (const param of _keys(params)) { - url.searchParams.set(param, params[param]) - } - - const at = getters.getAuthToken - if (at) { - url.searchParams.set('authToken', at) - } - } - - return fetch(url.href, options).then(response => { - return response.json() - }) - } - }, - - getters: { - getPreferenceString: state => (id, default_) => { - return _get(state.prefs, id, default_) - }, - - getPreferenceBoolean: (_, getters) => (...args) => { - const v = getters.getPreferenceString(...args) - - switch (v) { - case 'true': - case true: - case '1': - case 'on': - case 'yes': - return true - default: - return false - } - }, - - getPreferenceNumber: (_, getters) => (id, default_) => { - const v = getters.getPreferenceString(id, default_) - - const n = Number(v) - if (!Number.isFinite(n)) { - return default_ - } else { - return n - } - }, - - getEffectiveTheme (state, getters) { - let theme = getters.getPreferenceString('theme', 'light') - if (theme === 'auto') { - theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' - } - return theme - }, - - backgroundColor (state, getters) { - return getters.getEffectiveTheme === 'light' ? '#fff' : '#0b0e0f' - }, - secondaryBackgroundColor (state, getters) { - return getters.getEffectiveTheme === 'light' ? '#e5e5e5' : '#242727' - }, - foregroundColor (state, getters) { - return getters.getEffectiveTheme === 'light' ? '#15191a' : '#0b0e0f' - }, - secondaryForegroundColor (state, getters) { - return getters.getEffectiveTheme === 'light' ? '#666' : '#393d3d' - }, - - getAuthToken (state, getters) { - return getters.getPreferenceString(['authToken', getters]) - }, - - apiUrl (state, getters) { - return getters.getPreferenceString('instance', 'https://pipedapi.kavin.rocks') - }, - - authenticated (state, getters) { - return getters.getAuthToken !== undefined - } - }, modules: { + prefs: PrefsStore, + auth: AuthenticationStore } }) -store.watch(state => state.prefs, (nextPrefs) => { +store.watch(state => state.prefs.prefs, (nextPrefs) => { if (isPlainObject(nextPrefs)) { window.localStorage.setItem('PREFERENCES', JSON.stringify(nextPrefs)) } diff --git a/src/store/prefs-store.js b/src/store/prefs-store.js new file mode 100644 index 0000000..096efa5 --- /dev/null +++ b/src/store/prefs-store.js @@ -0,0 +1,75 @@ +import { cloneDeep as _cloneDeep, get as _get, isString, set as _set } from 'lodash-es' + +const PrefsStore = { + namespaced: true, + state: () => ({ + prefs: {} + }), + mutations: { + setPrefs (state, { + id, + value + }) { + const clonedPrefs = _cloneDeep(state.prefs) + _set(clonedPrefs, id, value) + state.prefs = clonedPrefs + }, + + replacePrefs (state, nextPrefs) { + state.prefs = nextPrefs + } + }, + actions: { + loadState ({ commit }) { + try { + const jv = window.localStorage.getItem('PREFERENCES') + if (isString(jv) && jv.length !== 0) { + const p = JSON.parse(jv) + commit('replacePrefs', p) + } + } catch (e) { + console.log('Error:', e) + } + } + }, + + getters: { + getPreference: state => (id, default_) => { + return _get(state.prefs, id, default_) + }, + + getPreferenceBoolean: (_, getters) => (...args) => { + const v = getters.getPreference(...args) + + switch (v) { + case 'true': + case true: + case '1': + case 'on': + case 'yes': + return true + default: + return false + } + }, + + getPreferenceNumber: (_, getters) => (id, default_) => { + const v = getters.getPreference(id, default_) + + const n = Number(v) + if (!Number.isFinite(n)) { + return default_ + } else { + return n + } + }, + + apiUrl (state, getters) { + return getters.getPreference('instance', 'https://pipedapi.kavin.rocks') + } + } +} + +export { + PrefsStore +} diff --git a/yarn.lock b/yarn.lock index 6b68b51..6a7153f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1998,6 +1998,13 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59" integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA== +axios@^0.23.0: + version "0.23.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.23.0.tgz#b0fa5d0948a8d1d75e3d5635238b6c4625b05149" + integrity sha512-NmvAE4i0YAv5cKq8zlDoPd1VLKAqX5oLuZKs8xkJa4qi6RGn0uhCYFjWtHHC9EM/MwOwYWOs53W+V0aqEXq1sg== + dependencies: + follow-redirects "^1.14.4" + babel-extract-comments@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21" @@ -4390,6 +4397,11 @@ follow-redirects@^1.0.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.1.tgz#d9114ded0a1cfdd334e164e6662ad02bfd91ff43" integrity sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg== +follow-redirects@^1.14.4: + version "1.14.4" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379" + integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g== + for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" From 83239c32823371faf86687802475e24e9da3ea29 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 22 Oct 2021 08:19:51 +0530 Subject: [PATCH 02/11] More porting --- src/components/Player.vue | 17 +++++++-------- src/routes/Channel.vue | 4 ++-- src/routes/Playlist.vue | 4 ++-- src/routes/Preferences.vue | 6 +++--- src/routes/SearchMenu.vue | 2 +- src/routes/SearchResults.vue | 4 ++-- src/routes/TrendingPage.vue | 6 +++--- src/routes/WatchVideo.vue | 36 +++++++++++-------------------- src/store/authentication-store.js | 7 +++++- src/store/index.js | 2 +- 10 files changed, 40 insertions(+), 48 deletions(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 46a3505..d60ffcc 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -142,7 +142,7 @@ export default { localPlayer.configure( 'streaming.bufferingGoal', - Math.max(this.$store.getters.getPreferenceNumber('bufferGoal', 10), 10) + Math.max(this.$store.getters['prefs/getPreferenceNumber']('bufferGoal', 10), 10) ) this.setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka) @@ -166,14 +166,14 @@ export default { }) videoEl.addEventListener('volumechange', () => { - this.$store.commit('setPrefs', { + this.$store.commit('prefs/setPrefs', { id: 'volume', value: videoEl.volume }) }) videoEl.addEventListener('ratechange', () => { - this.$store.commit('setPrefs', { + this.$store.commit('prefs/setPrefs', { id: 'rate', value: videoEl.playbackRate }) @@ -206,7 +206,7 @@ export default { this.player = player - const disableVideo = this.$store.getters.getPreferenceBoolean('listen', false) && !this.video.livestream + const disableVideo = this.$store.getters['prefs/getPreferenceBoolean']('listen', false) && !this.video.livestream this.player.configure({ preferredVideoCodecs: this.preferredVideoCodecs, @@ -216,9 +216,8 @@ export default { } }) - const quality = this.$store.getters.getPreferenceNumber('quality', 0) - const qualityConds = - quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo + const quality = this.$store.getters['prefs/getPreferenceNumber']('quality', 0) + const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo if (qualityConds) this.player.configure('abr.enabled', false) player.load(uri, 0, mime).then(() => { @@ -248,8 +247,8 @@ export default { subtitle.name ) }) - videoEl.volume = this.$store.getters.getPreferenceNumber('volume', 1) - videoEl.playbackRate = this.$store.getters.getPreferenceNumber('rate', 1) + videoEl.volume = this.$store.getters['prefs/getPreferenceNumber']('volume', 1) + videoEl.playbackRate = this.$store.getters['prefs/getPreferenceNumber']('rate', 1) }) } }, diff --git a/src/routes/Channel.vue b/src/routes/Channel.vue index 9c8ba6a..950af7c 100644 --- a/src/routes/Channel.vue +++ b/src/routes/Channel.vue @@ -55,7 +55,7 @@ export default { }, methods: { async fetchChannel () { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { path: '/' + this.$route.params.path + '/' + this.$route.params.channelId }) }, @@ -71,7 +71,7 @@ export default { }, fetchMoreVideos () { - this.$store.dispatch('fetchJson', { + this.$store.dispatch('auth/makeRequest', { path: '/nextpage/channel/' + this.channel.id, params: { nextpage: this.channel.nextpage diff --git a/src/routes/Playlist.vue b/src/routes/Playlist.vue index 75d688c..b0101e6 100644 --- a/src/routes/Playlist.vue +++ b/src/routes/Playlist.vue @@ -61,7 +61,7 @@ export default { }, computed: { getRssUrl () { - return this.$store.getters.apiUrl + '/rss/playlists/' + this.$route.query.list + return this.$store.getters['prefs/apiUrl'] + '/rss/playlists/' + this.$route.query.list }, chunkedByFour () { @@ -70,7 +70,7 @@ export default { }, methods: { async fetchPlaylist () { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { path: '/playlists/' + this.$route.query.list }) }, diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue index d05de70..5ec5867 100644 --- a/src/routes/Preferences.vue +++ b/src/routes/Preferences.vue @@ -3,8 +3,8 @@

{{ $t('titles.preferences') }}

- - + +

{{ $t('preferences.' + opt.id) }}


{{ $t('actions.instances_list') }}
@@ -139,7 +139,7 @@ export default { }, methods: { setValue (k, v) { - this.$store.commit('setPrefs', { + this.$store.commit('prefs/setPrefs', { id: k, value: v }) diff --git a/src/routes/SearchMenu.vue b/src/routes/SearchMenu.vue index 1649943..f17db0b 100644 --- a/src/routes/SearchMenu.vue +++ b/src/routes/SearchMenu.vue @@ -54,7 +54,7 @@ export default { methods: { async refreshSuggestions () { this.requestInProgress = true - this.searchSuggestions = await this.$store.dispatch('fetchJson', { + this.searchSuggestions = await this.$store.dispatch('auth/makeRequest', { path: '/suggestions', params: { query: this.searchText diff --git a/src/routes/SearchResults.vue b/src/routes/SearchResults.vue index cbbb106..5d6a0af 100644 --- a/src/routes/SearchResults.vue +++ b/src/routes/SearchResults.vue @@ -98,7 +98,7 @@ export default { }, async fetchResults () { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { path: 'search', params: { q: this.$route.query.search_query, @@ -127,7 +127,7 @@ export default { }, fetchMoreResults () { - this.$store.dispatch('fetchJson', { + this.$store.dispatch('auth/makeRequest', { path: '/nextpage/search', params: { nextpage: this.results.nextpage, diff --git a/src/routes/TrendingPage.vue b/src/routes/TrendingPage.vue index ed9e779..7de8ecd 100644 --- a/src/routes/TrendingPage.vue +++ b/src/routes/TrendingPage.vue @@ -31,16 +31,16 @@ export default { }, mounted () { - const region = this.$store.getters.getPreference('region', 'US') + const region = this.$store.getters['prefs/getPreference']('region', 'US') this.fetchTrending(region).then(videos => (this.videos = videos)) }, methods: { async fetchTrending (region) { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { path: '/trending', params: { - region: region || 'US' + region: region } }) } diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue index e2eb2a5..8518a61 100644 --- a/src/routes/WatchVideo.vue +++ b/src/routes/WatchVideo.vue @@ -52,7 +52,7 @@
@@ -170,7 +170,7 @@ export default { params: { category: '["' + - this.$store.getters.getPreference('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll( + this.$store.getters['prefs/getPreference']('selectedSkip', 'sponsor,interaction,selfpromo,music_offtopic').replaceAll( ',', '","' ) + @@ -179,7 +179,7 @@ export default { }) }, fetchComments () { - return this.$store.dispatch('fetchJson', { + return this.$store.dispatch('auth/makeRequest', { path: '/comments/' + this.getVideoId() }) }, @@ -191,7 +191,7 @@ export default { }, fetchMoreComments () { - this.$store.dispatch('fetchJson', { + this.$store.dispatch('auth/makeRequest', { path: '/nextpage/comments/' + this.getVideoId(), params: { nextpage: this.comments.nextpage @@ -203,7 +203,7 @@ export default { }, onAutoplayChg (ev) { - this.$store.commit('setPrefs', { + this.$store.commit('prefs/setPrefs', { id: 'autoplay', value: ev }) @@ -232,7 +232,7 @@ export default { }) }, async getSponsors () { - if (this.$store.getters.getPreference('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) } + if (this.$store.getters['prefs/getPreference']('sponsorblock', true)) { this.fetchSponsors().then(data => (this.sponsors = data)) } }, async getComments () { this.fetchComments().then(data => (this.comments = data)) @@ -240,33 +240,21 @@ export default { async fetchSubscribedStatus () { if (!this.channelId) return - this.$store.dispatch('fetchJson', { + this.$store.dispatch('auth/makeRequest', { path: '/subscribed', params: { channelId: this.channelId - }, - options: { - headers: { - Authorization: this.$store.getters.getAuthToken - } } }).then(json => { this.subscribed = json.subscribed }) }, subscribeHandler () { - this.$store.dispatch('fetchJson', { + this.$store.dispatch('auth/makeRequest', { + method: 'POST', path: (this.subscribed ? '/unsubscribe' : '/subscribe'), - params: null, - options: { - method: 'POST', - body: JSON.stringify({ - channelId: this.channelId - }), - headers: { - Authorization: this.$store.getters.getAuthToken, - 'Content-Type': 'application/json' - } + data: { + channelId: this.channelId } }) this.subscribed = !this.subscribed @@ -278,7 +266,7 @@ export default { }, computed: { isAutoplayEnabled () { - return this.$store.getters.getPreferenceBoolean('autoplay') + return this.$store.getters['prefs/getPreferenceBoolean']('autoplay') } }, components: { diff --git a/src/store/authentication-store.js b/src/store/authentication-store.js index 20f77a7..118bff1 100644 --- a/src/store/authentication-store.js +++ b/src/store/authentication-store.js @@ -34,7 +34,12 @@ const AuthenticationStore = { baseURL: rootGetters['prefs/apiUrl'], method, url: path, - params + params, + headers: state.isAuthenticated + ? { + Authorization: state.authToken + } + : undefined }) return resp diff --git a/src/store/index.js b/src/store/index.js index 2ca419f..04e1212 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -14,7 +14,7 @@ const store = new Vuex.Store({ } }) -store.watch(state => state.prefs.prefs, (nextPrefs) => { +store.watch(state => state['prefs/prefs'], (nextPrefs) => { if (isPlainObject(nextPrefs)) { window.localStorage.setItem('PREFERENCES', JSON.stringify(nextPrefs)) } From b90ce768d13969d455fd7da057865064f23ef263 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 22 Oct 2021 08:30:32 +0530 Subject: [PATCH 03/11] More compact comments NOTE: May be removed later --- src/components/VideoComment.vue | 43 +++++++++++++++------------------ 1 file changed, 20 insertions(+), 23 deletions(-) diff --git a/src/components/VideoComment.vue b/src/components/VideoComment.vue index cf8ee8e..f29fd6e 100644 --- a/src/components/VideoComment.vue +++ b/src/components/VideoComment.vue @@ -1,29 +1,26 @@ diff --git a/src/main.js b/src/main.js index cd89fe3..895a194 100644 --- a/src/main.js +++ b/src/main.js @@ -1,7 +1,6 @@ import Vue from 'vue' import App from './App.vue' -import '@fontsource/hind-siliguri/latin.css' import '@/styles/main.scss' import { i18n } from '@/plugins/i18n' diff --git a/src/plugins/i18n.js b/src/plugins/i18n.js index bb0384e..0bef06c 100644 --- a/src/plugins/i18n.js +++ b/src/plugins/i18n.js @@ -65,10 +65,12 @@ export async function changeLocale (lang) { } function initializeLocalLocale () { - const lang = window.localStorage.getItem('LOCALE') - if (lang != null) { - changeLocale(lang).catch(e => console.error(e)) + let lang = window.localStorage.getItem('LOCALE') + if (lang == null) { + // Default language + lang = 'en' } + changeLocale(lang).catch(e => console.error(e)) } initializeLocalLocale() diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue index 8518a61..27044c2 100644 --- a/src/routes/WatchVideo.vue +++ b/src/routes/WatchVideo.vue @@ -238,7 +238,7 @@ export default { this.fetchComments().then(data => (this.comments = data)) }, async fetchSubscribedStatus () { - if (!this.channelId) return + if (!this.channelId || !this.$store.state['auth/isAuthenticated']) return this.$store.dispatch('auth/makeRequest', { path: '/subscribed', diff --git a/src/store/authentication-store.js b/src/store/authentication-store.js index 118bff1..33c6415 100644 --- a/src/store/authentication-store.js +++ b/src/store/authentication-store.js @@ -5,11 +5,25 @@ const AuthenticationStore = { namespaced: true, state: () => ({ - isAuthenticated: true, + isAuthenticated: false, authToken: null }), + mutations: { + replaceAuth (state, data) { + state.isAuthenticated = data.isAuthenticated ?? state.isAuthenticated + state.authToken = data.authToken ?? state.authToken + } + }, + actions: { + initializeAuth ({ commit }) { + const data = window.localStorage.getItem('AUTH') + if (data != null) { + commit('replaceAuth', data) + } + }, + async makeRequest ({ commit, state, diff --git a/src/styles/main.scss b/src/styles/main.scss index eb90fc2..dc5fd48 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -12,4 +12,10 @@ } } -@include addFonts('Hind Siliguri'); +.latin { + @include addFonts('Helvetica Neue'); +} + +.bengali { + @include addFonts('Hind Silliguri') +} From 4a5729b05fcb9bc32d51b0ab5e311d54c4b8ec79 Mon Sep 17 00:00:00 2001 From: root Date: Fri, 22 Oct 2021 09:07:32 +0530 Subject: [PATCH 05/11] Use the grid to align --- src/App.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index 6ce4c87..8d53bc5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,10 +4,9 @@ app color="primary" dark - class="pt-3" v-if="$vuetify.breakpoint.mdAndUp" > - + - + Date: Fri, 22 Oct 2021 09:24:57 +0530 Subject: [PATCH 06/11] Add URLs to the uploader name --- src/routes/WatchVideo.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/routes/WatchVideo.vue b/src/routes/WatchVideo.vue index 27044c2..51686e6 100644 --- a/src/routes/WatchVideo.vue +++ b/src/routes/WatchVideo.vue @@ -47,9 +47,9 @@
-
+ {{ video.uploader }} -
+
Date: Fri, 22 Oct 2021 09:35:57 +0530 Subject: [PATCH 07/11] Refactor prefs a bit --- src/routes/Preferences.vue | 13 +++++++++++-- src/store/index.js | 7 ------- src/store/prefs-store.js | 7 +++---- 3 files changed, 14 insertions(+), 13 deletions(-) diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue index 5ec5867..29e8636 100644 --- a/src/routes/Preferences.vue +++ b/src/routes/Preferences.vue @@ -3,8 +3,17 @@

{{ $t('titles.preferences') }}

- - + +

{{ $t('preferences.' + opt.id) }}


{{ $t('actions.instances_list') }}
diff --git a/src/store/index.js b/src/store/index.js index 04e1212..b092a21 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,6 +1,5 @@ import Vue from 'vue' import Vuex from 'vuex' -import { isPlainObject } from 'lodash-es' import { PrefsStore } from '@/store/prefs-store' import { AuthenticationStore } from '@/store/authentication-store' @@ -14,10 +13,4 @@ const store = new Vuex.Store({ } }) -store.watch(state => state['prefs/prefs'], (nextPrefs) => { - if (isPlainObject(nextPrefs)) { - window.localStorage.setItem('PREFERENCES', JSON.stringify(nextPrefs)) - } -}) - export default store diff --git a/src/store/prefs-store.js b/src/store/prefs-store.js index 096efa5..f3f41ae 100644 --- a/src/store/prefs-store.js +++ b/src/store/prefs-store.js @@ -1,4 +1,4 @@ -import { cloneDeep as _cloneDeep, get as _get, isString, set as _set } from 'lodash-es' +import { get as _get, isString, set as _set } from 'lodash-es' const PrefsStore = { namespaced: true, @@ -10,9 +10,8 @@ const PrefsStore = { id, value }) { - const clonedPrefs = _cloneDeep(state.prefs) - _set(clonedPrefs, id, value) - state.prefs = clonedPrefs + _set(state.prefs, id, value) + window.localStorage.setItem('PREFERENCES', JSON.stringify(state.prefs)) }, replacePrefs (state, nextPrefs) { From f0f2276a35dd8ef207965947c7ba99d839fdf5cc Mon Sep 17 00:00:00 2001 From: root Date: Sat, 23 Oct 2021 07:20:48 +0530 Subject: [PATCH 08/11] Fix mistakes from the merge --- src/components/Player.vue | 17 +- src/components/Player.vue.orig | 335 --------------------------------- 2 files changed, 8 insertions(+), 344 deletions(-) delete mode 100644 src/components/Player.vue.orig diff --git a/src/components/Player.vue b/src/components/Player.vue index 46a3505..d60ffcc 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -142,7 +142,7 @@ export default { localPlayer.configure( 'streaming.bufferingGoal', - Math.max(this.$store.getters.getPreferenceNumber('bufferGoal', 10), 10) + Math.max(this.$store.getters['prefs/getPreferenceNumber']('bufferGoal', 10), 10) ) this.setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka) @@ -166,14 +166,14 @@ export default { }) videoEl.addEventListener('volumechange', () => { - this.$store.commit('setPrefs', { + this.$store.commit('prefs/setPrefs', { id: 'volume', value: videoEl.volume }) }) videoEl.addEventListener('ratechange', () => { - this.$store.commit('setPrefs', { + this.$store.commit('prefs/setPrefs', { id: 'rate', value: videoEl.playbackRate }) @@ -206,7 +206,7 @@ export default { this.player = player - const disableVideo = this.$store.getters.getPreferenceBoolean('listen', false) && !this.video.livestream + const disableVideo = this.$store.getters['prefs/getPreferenceBoolean']('listen', false) && !this.video.livestream this.player.configure({ preferredVideoCodecs: this.preferredVideoCodecs, @@ -216,9 +216,8 @@ export default { } }) - const quality = this.$store.getters.getPreferenceNumber('quality', 0) - const qualityConds = - quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo + const quality = this.$store.getters['prefs/getPreferenceNumber']('quality', 0) + const qualityConds = quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo if (qualityConds) this.player.configure('abr.enabled', false) player.load(uri, 0, mime).then(() => { @@ -248,8 +247,8 @@ export default { subtitle.name ) }) - videoEl.volume = this.$store.getters.getPreferenceNumber('volume', 1) - videoEl.playbackRate = this.$store.getters.getPreferenceNumber('rate', 1) + videoEl.volume = this.$store.getters['prefs/getPreferenceNumber']('volume', 1) + videoEl.playbackRate = this.$store.getters['prefs/getPreferenceNumber']('rate', 1) }) } }, diff --git a/src/components/Player.vue.orig b/src/components/Player.vue.orig deleted file mode 100644 index 98947ef..0000000 --- a/src/components/Player.vue.orig +++ /dev/null @@ -1,335 +0,0 @@ - - - - - From 728252aa4c30459c6fa2d3fdea2d83ac195d20f6 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 23 Oct 2021 08:06:27 +0530 Subject: [PATCH 09/11] I still don't understand what happened --- src/components/Player.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index d60ffcc..995f402 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -248,7 +248,7 @@ export default { ) }) videoEl.volume = this.$store.getters['prefs/getPreferenceNumber']('volume', 1) - videoEl.playbackRate = this.$store.getters['prefs/getPreferenceNumber']('rate', 1) + videoEl.playbackRate = videoEl.defaultPlaybackRate = this.$store.getters['prefs/getPreferenceNumber']('rate', 1) }) } }, From 750588219982207868b814f140511d35017fe49e Mon Sep 17 00:00:00 2001 From: root Date: Thu, 28 Oct 2021 19:36:23 +0530 Subject: [PATCH 10/11] Support for bufferingGoal --- src/components/Player.vue | 2 +- src/routes/Preferences.vue | 12 ++++++++++++ src/translations/en.json | 1 + 3 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/Player.vue b/src/components/Player.vue index 995f402..743c2c2 100644 --- a/src/components/Player.vue +++ b/src/components/Player.vue @@ -142,7 +142,7 @@ export default { localPlayer.configure( 'streaming.bufferingGoal', - Math.max(this.$store.getters['prefs/getPreferenceNumber']('bufferGoal', 10), 10) + this.$store.getters['prefs/getPreferenceNumber']('bufferGoal', 10) ) this.setPlayerAttrs(localPlayer, videoEl, uri, mime, shaka) diff --git a/src/routes/Preferences.vue b/src/routes/Preferences.vue index 29e8636..cd84800 100644 --- a/src/routes/Preferences.vue +++ b/src/routes/Preferences.vue @@ -8,6 +8,13 @@ :value="$store.getters['prefs/getPreferenceBoolean'](opt.id, opt.default)" @input="setValue(opt.id, $event)" /> + Date: Fri, 29 Oct 2021 09:52:16 +0530 Subject: [PATCH 11/11] Serve the MDI fonts inline --- package.json | 1 + public/index.html | 1 - src/main.js | 1 + yarn.lock | 5 +++++ 4 files changed, 7 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 0b1c27b..f34cb6e 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "dependencies": { "@babel/eslint-parser": "^7.15.0", "@fontsource/hind-siliguri": "^4.5.0", + "@mdi/font": "^6.4.95", "axios": "^0.23.0", "core-js": "^3.16.1", "dompurify": "^2.3.1", diff --git a/public/index.html b/public/index.html index 73ceb8d..4123528 100644 --- a/public/index.html +++ b/public/index.html @@ -6,7 +6,6 @@ <%= htmlWebpackPlugin.options.title %> -