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="row info-container">
<div class="info"> <div class="info">
<div class="row"> <div class="row">
<a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length"> <div class="title-container">
<div class="image"> <a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length">
<img :src="channel.image" /> <div class="image">
</div> <img :src="channel.image" />
</a> </div>
</a>
<a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer"> <a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
{{ channel?.name }} {{ channel?.name }}
</a> </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>
<div class="description" v-if="channel?.description"> <div class="description" v-if="channel?.description">
@ -70,6 +82,7 @@ export default {
loading: false, loading: false,
loadingNextPage: false, loadingNextPage: false,
selectedResult: null, selectedResult: null,
subscribed: false,
} }
}, },
@ -87,6 +100,7 @@ export default {
this.loading = true this.loading = true
try { try {
this.channel = await this.request('youtube.get_channel', {id: this.id}) this.channel = await this.request('youtube.get_channel', {id: this.id})
this.subscribed = await this.request('youtube.is_subscribed', {channel_id: this.id})
} finally { } finally {
this.loading = false 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) { onScroll(e) {
const el = e.target const el = e.target
if (!el) if (!el)
@ -139,5 +159,32 @@ export default {
.channel { .channel {
height: 100%; 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> </style>