Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-11-25 23:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add to channel group modal on channel page

Browse Source
This commit is contained in:
Bnyro 2023-09-14 17:04:04 +02:00
parent 859908cb1f
commit d3290c16de
6 changed files with 99 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/AddToGroupModal.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<ModalComponent @close="$emit('close')">
<span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" />
<div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1">
<div class="flex items-center justify-between">
<span>{{ group.groupName }}</span>
<input
type="checkbox"
:checked="group.channels.includes(channelId)"
@change="onCheckedChange(index, group)"
/>
</div>
<hr class="h-1 w-full" />
</div>
</ModalComponent>
</template>
<script>
import ModalComponent from "./ModalComponent.vue";
export default {
components: {
ModalComponent,
},
props: {
channelId: {
type: String,
required: true,
},
},
emits: ["close"],
data() {
return {
channelGroups: [],
};
},
mounted() {
this.loadChannelGroups();
},
methods: {
async loadChannelGroups() {
const groups = await this.getChannelGroups();
this.channelGroups.push(...groups);
},
onCheckedChange(index, group) {
if (group.channels.includes(this.channelId)) {
group.channels.splice(index, 1);
} else {
group.channels.push(this.channelId);
}
this.createOrUpdateChannelGroup(group);
},
},
};
</script>

12
src/components/ChannelPage.vue
View File

@ -27,6 +27,13 @@
@click="subscribeHandler"
></button>
<button
v-if="subscribed"
v-t="'actions.add_to_group'"
class="btn"
@click="showGroupModal = true"
></button>
<!-- RSS Feed button -->
<a
v-if="channel.id"
@ -70,6 +77,8 @@
hide-channel
/>
</div>
<AddToGroupModal v-if="showGroupModal" :channel-id="channel.id.substr(-11)" @close="showGroupModal = false" />
</LoadingIndicatorPage>
</template>
@ -79,6 +88,7 @@ import ContentItem from "./ContentItem.vue";
import WatchOnButton from "./WatchOnButton.vue";
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
import CollapsableText from "./CollapsableText.vue";
import AddToGroupModal from "./AddToGroupModal.vue";
export default {
components: {
@ -87,6 +97,7 @@ export default {
WatchOnButton,
LoadingIndicatorPage,
CollapsableText,
AddToGroupModal,
},
data() {
return {
@ -95,6 +106,7 @@ export default {
tabs: [],
selectedTab: 0,
contentItems: [],
showGroupModal: false,
};
},
mounted() {

17
src/components/FeedPage.vue
View File

@ -99,18 +99,7 @@ export default {
if (!window.db) return;
const cursor = this.getChannelGroupsCursor();
cursor.onsuccess = e => {
const cursor = e.target.result;
if (cursor) {
const group = cursor.value;
this.channelGroups.push({
groupName: group.groupName,
channels: JSON.parse(group.channels),
});
cursor.continue();
}
};
this.loadChannelGroups();
},
activated() {
document.title = this.$t("titles.feed") + " - Piped";
@ -135,6 +124,10 @@ export default {
});
}
},
async loadChannelGroups() {
const groups = await this.getChannelGroups();
this.channelGroups.push(...groups);
},
loadMoreVideos() {
if (!this.videosStore) return;
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);

18
src/components/SubscriptionsPage.vue
View File

@ -143,18 +143,8 @@ export default {
this.channelGroups.push(this.selectedGroup);
if (!window.db) return;
const cursor = this.getChannelGroupsCursor();
cursor.onsuccess = e => {
const cursor = e.target.result;
if (cursor) {
const group = cursor.value;
this.channelGroups.push({
groupName: group.groupName,
channels: JSON.parse(group.channels),
});
cursor.continue();
}
};
this.loadChannelGroups();
},
activated() {
document.title = "Subscriptions - Piped";
@ -173,6 +163,10 @@ export default {
});
}
},
async loadChannelGroups() {
const groups = await this.getChannelGroups();
this.channelGroups.push(...groups);
},
handleButton(subscription) {
const channelId = subscription.url.split("/")[2];
if (this.authenticated) {

3
src/locales/en.json
View File

@ -147,7 +147,8 @@
"show_search_suggestions": "Show search suggestions",
"delete_automatically": "Delete automatically after",
"generate_qrcode": "Generate QR Code",
"download_frame": "Download frame"
"download_frame": "Download frame",
"add_to_group": "Add to group"
},
"comment": {
"pinned_by": "Pinned by {author}",

25
src/main.js
View File

@ -247,11 +247,26 @@ const mixin = {
elem.click();
elem.remove();
},
getChannelGroupsCursor() {
if (!window.db) return;
var tx = window.db.transaction("channel_groups", "readonly");
var store = tx.objectStore("channel_groups");
return store.index("groupName").openCursor();
async getChannelGroups() {
return new Promise(resolve => {
let channelGroups = [];
var tx = window.db.transaction("channel_groups", "readonly");
var store = tx.objectStore("channel_groups");
const cursor = store.index("groupName").openCursor();
cursor.onsuccess = e => {
const cursor = e.target.result;
if (cursor) {
const group = cursor.value;
channelGroups.push({
groupName: group.groupName,
channels: JSON.parse(group.channels),
});
cursor.continue();
} else {
resolve(channelGroups);
}
};
});
},
createOrUpdateChannelGroup(group) {
var tx = window.db.transaction("channel_groups", "readwrite");