revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[YouTube UI] Added channel subscribe/unsubscribe buttons.

Browse source
This commit is contained in:
Fabio Manganiello 2024-07-13 00:40:29 +02:00
parent 55c4f5797b
commit 21ac87394a
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 55 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
View file

@ -11,15 +11,27 @@
<div class="row info-container">
<div class="info">
<div class="row">
<a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length">
<div class="image">
<img :src="channel.image" />
</div>
</a>
<div class="title-container">
<a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length">
<div class="image">
<img :src="channel.image" />
</div>
</a>
<a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
{{ channel?.name }}
</a>
<a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
{{ channel?.name }}
</a>
</div>
<div class="actions">
<button :title="subscribed ? 'Unsubscribe' : 'Subscribe'" @click="toggleSubscription">
{{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
</button>
<div class="subscribers" v-if="channel.subscribers != null && (channel.subscribers || 0) >= 0">
{{ channel.subscribers }} subscribers
</div>
</div>
</div>
<div class="description" v-if="channel?.description">
@ -70,6 +82,7 @@ export default {
loading: false,
loadingNextPage: false,
selectedResult: null,
subscribed: false,
}
},
@ -87,6 +100,7 @@ export default {
this.loading = true
try {
this.channel = await this.request('youtube.get_channel', {id: this.id})
this.subscribed = await this.request('youtube.is_subscribed', {channel_id: this.id})
} finally {
this.loading = false
}
@ -110,6 +124,12 @@ export default {
}
},
async toggleSubscription() {
const action = this.subscribed ? 'unsubscribe' : 'subscribe'
await this.request(`youtube.${action}`, {channel_id: this.id})
this.subscribed = !this.subscribed
},
onScroll(e) {
const el = e.target
if (!el)
@ -139,5 +159,32 @@ export default {
.channel {
height: 100%;
}
.header {
.title-container {
flex: 1;
}
.actions {
display: flex;
flex-direction: column;
align-items: center;
button {
background: $default-bg-7;
padding: 0.5em 1em;
border-radius: 0.5em;
cursor: pointer;
&:hover {
background: $hover-bg;
}
}
}
.subscribers {
font-size: 0.8em;
}
}
}
</style>