TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #3314 from Bnyro/share-video-item

Browse source 
feat: add share button to video items and improve share dialog ui
This commit is contained in:
Bnyro 2024-01-10 09:22:12 +01:00 committed by GitHub
commit c8e05c2954
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/components/ShareModal.vue
View file

@ -1,10 +1,11 @@
<template> <template>
<ModalComponent> <ModalComponent>
<h2 v-t="'actions.share'" /> <h2 v-t="'actions.share'" class="mb-5" />
<div class="flex justify-between"> <div class="flex justify-between">
<label v-t="'actions.piped_link'" /> <label v-t="'actions.piped_link'" />
<input v-model="pipedLink" type="checkbox" @change="onChange" /> <input v-model="pipedLink" type="checkbox" @change="onChange" />
</div> </div>
<hr />
<div v-if="hasPlaylist" class="flex justify-between"> <div v-if="hasPlaylist" class="flex justify-between">
<label v-t="'actions.with_playlist'" /> <label v-t="'actions.with_playlist'" />
<input v-model="withPlaylist" type="checkbox" @change="onChange" /> <input v-model="withPlaylist" type="checkbox" @change="onChange" />
@ -17,6 +18,7 @@
<label v-t="'actions.time_code'" /> <label v-t="'actions.time_code'" />
<input v-model="timeStamp" class="input w-12" type="text" @change="onChange" /> <input v-model="timeStamp" class="input w-12" type="text" @change="onChange" />
</div> </div>
<hr />
<a :href="generatedLink" target="_blank"> <a :href="generatedLink" target="_blank">
<h3 class="mt-4" v-text="generatedLink" /> <h3 class="mt-4" v-text="generatedLink" />
</a> </a>

21
src/components/VideoItem.vue
View file

@ -107,9 +107,12 @@
> >
<font-awesome-icon icon="headphones" /> <font-awesome-icon icon="headphones" />
</router-link> </router-link>
<button :title="$t('actions.add_to_playlist')" @click="showModal = !showModal"> <button :title="$t('actions.add_to_playlist')" @click="showPlaylistModal = !showPlaylistModal">
<font-awesome-icon icon="circle-plus" /> <font-awesome-icon icon="circle-plus" />
</button> </button>
<button :title="$t('actions.share')" @click="showShareModal = !showShareModal">
<font-awesome-icon icon="share" />
</button>
<button <button
v-if="admin" v-if="admin"
ref="removeButton" ref="removeButton"
@ -125,10 +128,16 @@
@confirm="removeVideo(item.url.substr(-11))" @confirm="removeVideo(item.url.substr(-11))"
/> />
<PlaylistAddModal <PlaylistAddModal
v-if="showModal" v-if="showPlaylistModal"
:video-id="item.url.substr(-11)" :video-id="item.url.substr(-11)"
:video-info="item" :video-info="item"
@close="showModal = !showModal" @close="showPlaylistModal = false"
/>
<ShareModal
v-if="showShareModal"
:video-id="item.url.substr(-11)"
:current-time="0"
@close="showShareModal = false"
/> />
</div> </div>
</div> </div>
@ -137,10 +146,11 @@
<script> <script>
import PlaylistAddModal from "./PlaylistAddModal.vue"; import PlaylistAddModal from "./PlaylistAddModal.vue";
import ShareModal from "./ShareModal.vue";
import ConfirmModal from "./ConfirmModal.vue"; import ConfirmModal from "./ConfirmModal.vue";
export default { export default {
components: { PlaylistAddModal, ConfirmModal }, components: { PlaylistAddModal, ConfirmModal, ShareModal },
props: { props: {
item: { item: {
type: Object, type: Object,
@ -162,7 +172,8 @@ export default {
emits: ["remove"], emits: ["remove"],
data() { data() {
return { return {
showModal: false, showPlaylistModal: false,
showShareModal: false,
showVideo: true, showVideo: true,
showConfirmRemove: false, showConfirmRemove: false,
}; };