Skip to content

Commit 1699e30

Browse files
absidueabsidue
committed
Create shared UI component for the subscription tabs
1 parent 163a379 commit 1699e30

File tree

11 files changed

+210
-455
lines changed

11 files changed

+210
-455
lines changed

‎src/renderer/components/subscriptions-live/subscriptions-live.js

Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
11
import { defineComponent } from 'vue'
22
import { mapActions, mapMutations } from 'vuex'
3-
import FtLoader from '../../components/ft-loader/ft-loader.vue'
4-
import FtCard from '../../components/ft-card/ft-card.vue'
5-
import FtButton from '../../components/ft-button/ft-button.vue'
6-
import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
7-
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
8-
import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
9-
import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
3+
import SubscriptionsTabUI from '../subscriptions-tab-ui/subscriptions-tab-ui.vue'
104

115
import { copyToClipboard, showToast } from '../../helpers/utils'
126
import { invidiousAPICall } from '../../helpers/api/invidious'
@@ -16,18 +10,11 @@ import { addPublishedDatesInvidious, addPublishedDatesLocal, parseYouTubeRSSFeed
1610
export default defineComponent({
1711
name: 'SubscriptionsLive',
1812
components: {
19-
'ft-loader': FtLoader,
20-
'ft-card': FtCard,
21-
'ft-button': FtButton,
22-
'ft-icon-button': FtIconButton,
23-
'ft-flex-box': FtFlexBox,
24-
'ft-element-list': FtElementList,
25-
'ft-channel-bubble': FtChannelBubble
13+
'subscriptions-tab-ui': SubscriptionsTabUI
2614
},
2715
data: function () {
2816
return {
2917
isLoading: false,
30-
dataLimit: 100,
3118
videoList: [],
3219
errorChannels: [],
3320
attemptedFetch: false,
@@ -50,14 +37,6 @@ export default defineComponent({
5037
return this.$store.getters.getUseRssFeeds
5138
},
5239

53-
activeVideoList: function () {
54-
if (this.videoList.length < this.dataLimit) {
55-
return this.videoList
56-
} else {
57-
return this.videoList.slice(0, this.dataLimit)
58-
}
59-
},
60-
6140
activeProfile: function () {
6241
return this.$store.getters.getActiveProfile
6342
},
@@ -99,19 +78,10 @@ export default defineComponent({
9978
},
10079
},
10180
mounted: async function () {
102-
document.addEventListener('keydown', this.keyboardShortcutHandler)
103-
10481
this.isLoading = true
105-
const dataLimit = sessionStorage.getItem('subscriptionLimit')
106-
if (dataLimit !== null) {
107-
this.dataLimit = dataLimit
108-
}
10982

11083
this.loadVideosFromCacheSometimes()
11184
},
112-
beforeDestroy: function () {
113-
document.removeEventListener('keydown', this.keyboardShortcutHandler)
114-
},
11585
methods: {
11686
loadVideosFromCacheSometimes() {
11787
// This method is called on view visible
@@ -134,10 +104,6 @@ export default defineComponent({
134104
this.isLoading = false
135105
},
136106

137-
goToChannel: function (id) {
138-
this.$router.push({ path: `/channel/${id}` })
139-
},
140-
141107
loadVideosForSubscriptionsFromRemote: async function () {
142108
if (this.activeSubscriptionList.length === 0) {
143109
this.isLoading = false
@@ -357,33 +323,6 @@ export default defineComponent({
357323
}
358324
},
359325

360-
increaseLimit: function () {
361-
this.dataLimit += 100
362-
sessionStorage.setItem('subscriptionLimit', this.dataLimit)
363-
},
364-
365-
/**
366-
* This function `keyboardShortcutHandler` should always be at the bottom of this file
367-
* @param {KeyboardEvent} event the keyboard event
368-
*/
369-
keyboardShortcutHandler: function (event) {
370-
if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
371-
return
372-
}
373-
// Avoid handling events due to user holding a key (not released)
374-
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
375-
if (event.repeat) { return }
376-
377-
switch (event.key) {
378-
case 'r':
379-
case 'R':
380-
if (!this.isLoading) {
381-
this.loadVideosForSubscriptionsFromRemote()
382-
}
383-
break
384-
}
385-
},
386-
387326
...mapActions([
388327
'updateShowProgressBar',
389328
'updateSubscriptionLiveCacheByChannel',

‎src/renderer/components/subscriptions-live/subscriptions-live.vue

Lines changed: 7 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,11 @@
11
<template>
2-
<div>
3-
<ft-loader
4-
v-if="isLoading"
5-
/>
6-
<div
7-
v-if="!isLoading && errorChannels.length !== 0"
8-
>
9-
<h3> {{ $t("Subscriptions.Error Channels") }}</h3>
10-
<div>
11-
<ft-channel-bubble
12-
v-for="(channel, index) in errorChannels"
13-
:key="index"
14-
:channel-name="channel.name"
15-
:channel-id="channel.id"
16-
:channel-thumbnail="channel.thumbnail"
17-
class="channelBubble"
18-
@click="goToChannel(channel.id)"
19-
/>
20-
</div>
21-
</div>
22-
<ft-flex-box
23-
v-if="!isLoading && activeVideoList.length === 0"
24-
>
25-
<p
26-
v-if="activeSubscriptionList.length === 0"
27-
class="message"
28-
>
29-
{{ $t("Subscriptions['Your Subscription list is currently empty. Start adding subscriptions to see them here.']") }}
30-
</p>
31-
<p
32-
v-else-if="!fetchSubscriptionsAutomatically && !attemptedFetch"
33-
class="message"
34-
>
35-
{{ $t("Subscriptions.Disabled Automatic Fetching") }}
36-
</p>
37-
<p
38-
v-else
39-
class="message"
40-
>
41-
{{ $t("Subscriptions.Empty Channels") }}
42-
</p>
43-
</ft-flex-box>
44-
<ft-element-list
45-
v-if="!isLoading && activeVideoList.length > 0"
46-
:data="activeVideoList"
47-
:use-channels-hidden-preference="false"
48-
/>
49-
<ft-flex-box
50-
v-if="!isLoading && videoList.length > dataLimit"
51-
>
52-
<ft-button
53-
:label="$t('Subscriptions.Load More Videos')"
54-
background-color="var(--primary-color)"
55-
text-color="var(--text-with-main-color)"
56-
@click="increaseLimit"
57-
/>
58-
</ft-flex-box>
59-
<ft-icon-button
60-
v-if="!isLoading"
61-
:icon="['fas', 'sync']"
62-
class="floatingTopButton"
63-
:title="$t('Subscriptions.Refresh Subscriptions')"
64-
:size="12"
65-
theme="primary"
66-
@click="loadVideosForSubscriptionsFromRemote"
67-
/>
68-
</div>
2+
<subscriptions-tab-ui
3+
:is-loading="isLoading"
4+
:video-list="videoList"
5+
:error-channels="errorChannels"
6+
:attempted-fetch="attemptedFetch"
7+
@refresh="loadVideosForSubscriptionsFromRemote"
8+
/>
699
</template>
7010

7111
<script src="./subscriptions-live.js" />
72-
<style scoped src="./subscriptions-live.css" />

‎src/renderer/components/subscriptions-shorts/subscriptions-shorts.css

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎src/renderer/components/subscriptions-shorts/subscriptions-shorts.js

Lines changed: 2 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,18 @@
11
import { defineComponent } from 'vue'
22
import { mapActions, mapMutations } from 'vuex'
3-
import FtLoader from '../../components/ft-loader/ft-loader.vue'
4-
import FtCard from '../../components/ft-card/ft-card.vue'
5-
import FtButton from '../../components/ft-button/ft-button.vue'
6-
import FtIconButton from '../../components/ft-icon-button/ft-icon-button.vue'
7-
import FtFlexBox from '../../components/ft-flex-box/ft-flex-box.vue'
8-
import FtElementList from '../../components/ft-element-list/ft-element-list.vue'
9-
import FtChannelBubble from '../../components/ft-channel-bubble/ft-channel-bubble.vue'
3+
import SubscriptionsTabUI from '../subscriptions-tab-ui/subscriptions-tab-ui.vue'
104

115
import { parseYouTubeRSSFeed, updateVideoListAfterProcessing } from '../../helpers/subscriptions'
126
import { copyToClipboard, showToast } from '../../helpers/utils'
137

148
export default defineComponent({
159
name: 'SubscriptionsShorts',
1610
components: {
17-
'ft-loader': FtLoader,
18-
'ft-card': FtCard,
19-
'ft-button': FtButton,
20-
'ft-icon-button': FtIconButton,
21-
'ft-flex-box': FtFlexBox,
22-
'ft-element-list': FtElementList,
23-
'ft-channel-bubble': FtChannelBubble
11+
'subscriptions-tab-ui': SubscriptionsTabUI
2412
},
2513
data: function () {
2614
return {
2715
isLoading: false,
28-
dataLimit: 100,
2916
videoList: [],
3017
errorChannels: [],
3118
attemptedFetch: false,
@@ -44,14 +31,6 @@ export default defineComponent({
4431
return this.$store.getters.getCurrentInvidiousInstance
4532
},
4633

47-
activeVideoList: function () {
48-
if (this.videoList.length < this.dataLimit) {
49-
return this.videoList
50-
} else {
51-
return this.videoList.slice(0, this.dataLimit)
52-
}
53-
},
54-
5534
activeProfile: function () {
5635
return this.$store.getters.getActiveProfile
5736
},
@@ -93,19 +72,10 @@ export default defineComponent({
9372
},
9473
},
9574
mounted: async function () {
96-
document.addEventListener('keydown', this.keyboardShortcutHandler)
97-
9875
this.isLoading = true
99-
const dataLimit = sessionStorage.getItem('subscriptionLimit')
100-
if (dataLimit !== null) {
101-
this.dataLimit = dataLimit
102-
}
10376

10477
this.loadVideosFromCacheSometimes()
10578
},
106-
beforeDestroy: function () {
107-
document.removeEventListener('keydown', this.keyboardShortcutHandler)
108-
},
10979
methods: {
11080
loadVideosFromCacheSometimes() {
11181
// This method is called on view visible
@@ -128,10 +98,6 @@ export default defineComponent({
12898
this.isLoading = false
12999
},
130100

131-
goToChannel: function (id) {
132-
this.$router.push({ path: `/channel/${id}` })
133-
},
134-
135101
loadVideosForSubscriptionsFromRemote: async function () {
136102
if (this.activeSubscriptionList.length === 0) {
137103
this.isLoading = false
@@ -247,33 +213,6 @@ export default defineComponent({
247213
}
248214
},
249215

250-
increaseLimit: function () {
251-
this.dataLimit += 100
252-
sessionStorage.setItem('subscriptionLimit', this.dataLimit)
253-
},
254-
255-
/**
256-
* This function `keyboardShortcutHandler` should always be at the bottom of this file
257-
* @param {KeyboardEvent} event the keyboard event
258-
*/
259-
keyboardShortcutHandler: function (event) {
260-
if (event.ctrlKey || document.activeElement.classList.contains('ft-input')) {
261-
return
262-
}
263-
// Avoid handling events due to user holding a key (not released)
264-
// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat
265-
if (event.repeat) { return }
266-
267-
switch (event.key) {
268-
case 'r':
269-
case 'R':
270-
if (!this.isLoading) {
271-
this.loadVideosForSubscriptionsFromRemote()
272-
}
273-
break
274-
}
275-
},
276-
277216
...mapActions([
278217
'updateShowProgressBar',
279218
'updateSubscriptionShortsCacheByChannel',

0 commit comments

Comments
 (0)