TeamPiped-mirror
/
Piped
mirror of https://github.com/TeamPiped/Piped.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: option to create group in add to group modal

This commit is contained in:
Bnyro 2023-12-19 16:44:16 +01:00
parent ff7cc2dd3f
commit 8b4949349e
8 changed files with 93 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
renovate.json
View File

@ -9,24 +9,16 @@
"groupName": "unocss" "groupName": "unocss"
}, },
{ {
"matchPackagePrefixes": [ "matchPackagePrefixes": ["linkify"],
"linkify"
],
"groupName": "linkify" "groupName": "linkify"
}, },
{ {
"matchPackagePrefixes": [ "matchPackagePrefixes": ["@vitejs/"],
"@vitejs/" "matchPackageNames": ["vite"],
],
"matchPackageNames": [
"vite"
],
"groupName": "vite" "groupName": "vite"
}, },
{ {
"matchPackagePrefixes": [ "matchPackagePrefixes": ["@iconify-json/"],
"@iconify-json/"
],
"groupName": "iconify", "groupName": "iconify",
"automerge": true "automerge": true
} }

46
src/components/AddToGroupModal.vue
View File

@ -1,27 +1,38 @@
<template> <template>
<ModalComponent @close="$emit('close')"> <ModalComponent @close="$emit('close')">
<div class="h-[80vh] overflow-y-scroll pr-4"> <div class="min-w-[50vw] flex flex-col">
<span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" /> <div class="h-[70vh] overflow-y-scroll pr-4">
<div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1"> <span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" />
<div class="flex items-center justify-between"> <div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1">
<span>{{ group.groupName }}</span> <div class="flex items-center justify-between">
<input <span>{{ group.groupName }}</span>
type="checkbox" <input
:checked="group.channels.includes(channelId)" type="checkbox"
@change="onCheckedChange(index, group)" :checked="group.channels.includes(channelId)"
/> @change="onCheckedChange(index, group)"
/>
</div>
<hr class="h-1 w-full" />
</div> </div>
<hr class="h-1 w-full" />
</div> </div>
<button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="showCreateGroupModal = true" />
</div> </div>
</ModalComponent> </ModalComponent>
<CreateGroupModal
v-if="showCreateGroupModal"
:on-create-group="onCreateGroup"
@close="showCreateGroupModal = false"
/>
</template> </template>
<script> <script>
import ModalComponent from "./ModalComponent.vue"; import ModalComponent from "./ModalComponent.vue";
import CreateGroupModal from "./CreateGroupModal.vue";
export default { export default {
components: { components: {
ModalComponent, ModalComponent,
CreateGroupModal,
}, },
props: { props: {
channelId: { channelId: {
@ -32,6 +43,7 @@ export default {
emits: ["close"], emits: ["close"],
data() { data() {
return { return {
showCreateGroupModal: false,
channelGroups: [], channelGroups: [],
}; };
}, },
@ -51,6 +63,18 @@ export default {
} }
this.createOrUpdateChannelGroup(group); this.createOrUpdateChannelGroup(group);
}, },
onCreateGroup(newGroupName) {
if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
const newGroup = {
groupName: newGroupName,
channels: [],
};
this.channelGroups.push(newGroup);
this.createOrUpdateChannelGroup(newGroup);
this.showCreateGroupModal = false;
},
}, },
}; };
</script> </script>

2
src/components/ChannelPage.vue
View File

@ -3,8 +3,8 @@
<LoadingIndicatorPage :show-content="channel != null && !channel.error"> <LoadingIndicatorPage :show-content="channel != null && !channel.error">
<img <img
loading="lazy"
v-if="channel.bannerUrl" v-if="channel.bannerUrl"
loading="lazy"
:src="channel.bannerUrl" :src="channel.bannerUrl"
class="h-30 w-full object-cover py-1.5 md:h-50" class="h-30 w-full object-cover py-1.5 md:h-50"
/> />

6
src/components/ChaptersBar.vue
View File

@ -16,7 +16,7 @@
<img class="shrink-0" :src="chapter.image" :alt="chapter.title" /> <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
<div class="m-2 flex flex-col"> <div class="m-2 flex flex-col">
<span class="text-sm" :title="chapter.title" v-text="chapter.title" /> <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div>
@ -42,7 +42,7 @@
<img class="shrink-0" :src="chapter.image" :alt="chapter.title" /> <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
<div class="m-2 flex flex-col"> <div class="m-2 flex flex-col">
<span class="text-sm" :title="chapter.title" v-text="chapter.title" /> <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div>
@ -59,7 +59,7 @@
<img :src="chapter.image" :alt="chapter.title" /> <img :src="chapter.image" :alt="chapter.title" />
<div class="m-1 flex"> <div class="m-1 flex">
<span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" /> <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
<span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" /> <span class="px-1 text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
</div> </div>
</div> </div>
</div> </div>

2
src/components/CollapsableText.vue
View File

@ -7,7 +7,7 @@
<span v-if="text.length > visibleLimit && !showFullText">...</span> <span v-if="text.length > visibleLimit && !showFullText">...</span>
<button <button
v-if="text.length > visibleLimit" v-if="text.length > visibleLimit"
class="block whitespace-normal font-semibold text-neutral-500 hover:underline" class="block whitespace-normal text-neutral-500 font-semibold hover:underline"
@click="showFullText = !showFullText" @click="showFullText = !showFullText"
> >
[{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}] [{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]

35
src/components/CreateGroupModal.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<ModalComponent @close="$emit('close')">
<h2 v-t="'actions.create_group'" />
<div class="flex flex-col">
<input v-model="groupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" />
<button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" />
</div>
</ModalComponent>
</template>
<script>
import ModalComponent from "./ModalComponent.vue";
export default {
components: { ModalComponent },
props: {
onCreateGroup: {
required: true,
type: Function,
},
},
emits: ["close"],
data() {
return {
groupName: "",
};
},
methods: {
createGroup() {
this.onCreateGroup(this.groupName);
this.$emit("close");
},
},
};
</script>

28
src/components/SubscriptionsPage.vue
View File

@ -10,7 +10,7 @@
<!-- export to json --> <!-- export to json -->
<button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" /> <button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" />
</div> </div>
<div class="flex gap-1 flex-wrap m-1"> <div class="m-1 flex flex-wrap gap-1">
<!-- import channel groups to json--> <!-- import channel groups to json-->
<div> <div>
<label <label
@ -35,7 +35,7 @@
v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`" v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`"
/> />
</div> </div>
<div class="flex gap-1 self-center"> <div class="flex self-center gap-1">
<!-- subscriptions count, only shown if there are any --> <!-- subscriptions count, only shown if there are any -->
<i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{ <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
subscriptions.length subscriptions.length
@ -86,13 +86,11 @@
</div> </div>
<br /> <br />
<ModalComponent v-if="showCreateGroupModal" @close="showCreateGroupModal = !showCreateGroupModal"> <CreateGroupModal
<h2 v-t="'actions.create_group'" /> v-if="showCreateGroupModal"
<div class="flex flex-col"> :on-create-group="createGroup"
<input v-model="newGroupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" /> @close="showCreateGroupModal = false"
<button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" /> />
</div>
</ModalComponent>
<ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false"> <ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false">
<div class="mb-5 mt-3 flex justify-between"> <div class="mb-5 mt-3 flex justify-between">
@ -121,9 +119,10 @@
<script> <script>
import ModalComponent from "./ModalComponent.vue"; import ModalComponent from "./ModalComponent.vue";
import CreateGroupModal from "./CreateGroupModal.vue";
export default { export default {
components: { ModalComponent }, components: { ModalComponent, CreateGroupModal },
data() { data() {
return { return {
subscriptions: [], subscriptions: [],
@ -134,7 +133,6 @@ export default {
channelGroups: [], channelGroups: [],
showCreateGroupModal: false, showCreateGroupModal: false,
showEditGroupModal: false, showEditGroupModal: false,
newGroupName: "",
editedGroupName: "", editedGroupName: "",
}; };
}, },
@ -216,18 +214,16 @@ export default {
this.selectedGroup = group; this.selectedGroup = group;
this.editedGroupName = group.groupName; this.editedGroupName = group.groupName;
}, },
createGroup() { createGroup(newGroupName) {
if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return; if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
const newGroup = { const newGroup = {
groupName: this.newGroupName, groupName: newGroupName,
channels: [], channels: [],
}; };
this.channelGroups.push(newGroup); this.channelGroups.push(newGroup);
this.createOrUpdateChannelGroup(newGroup); this.createOrUpdateChannelGroup(newGroup);
this.newGroupName = "";
this.showCreateGroupModal = false; this.showCreateGroupModal = false;
}, },
editGroupName() { editGroupName() {

4
src/components/VideoItem.vue
View File

@ -61,8 +61,8 @@
<div class="flex"> <div class="flex">
<router-link :to="item.uploaderUrl"> <router-link :to="item.uploaderUrl">
<img <img
loading="lazy"
v-if="item.uploaderAvatar" v-if="item.uploaderAvatar"
loading="lazy"
:src="item.uploaderAvatar" :src="item.uploaderAvatar"
class="mr-0.5 mt-0.5 h-32px w-32px rounded-full" class="mr-0.5 mt-0.5 h-32px w-32px rounded-full"
width="68" width="68"
@ -81,7 +81,7 @@
<font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" /> <font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
</router-link> </router-link>
<div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs font-normal text-gray-300"> <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
<span v-if="item.views >= 0"> <span v-if="item.views >= 0">
<font-awesome-icon icon="eye" /> <font-awesome-icon icon="eye" />
<span class="pl-1" v-text="`${numberFormat(item.views)} •`" /> <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />