Merge pull request #1851 from gmnsii/playlist-integration-with-share

Add playlist integration for share button
This commit is contained in:
Kavin 2023-01-02 21:29:07 +00:00 committed by GitHub
commit 65118a440f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 31 additions and 7 deletions

View file

@ -1,19 +1,25 @@
<template>
<ModalComponent>
<h2 v-t="'actions.share'" />
<div class="flex justify-between mt-4">
<label v-t="'actions.with_timecode'" for="withTimeCode" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
</div>
<div class="flex justify-between">
<label v-t="'actions.piped_link'" />
<input type="checkbox" v-model="pipedLink" @change="onChange" />
</div>
<div class="flex justify-between mt-2">
<div v-if="this.hasPlaylist" class="flex justify-between">
<label v-t="'actions.with_playlist'" />
<input type="checkbox" v-model="withPlaylist" @change="onChange" />
</div>
<div class="flex justify-between">
<label v-t="'actions.with_timecode'" for="withTimeCode" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
</div>
<div v-if="this.withTimeCode" class="flex justify-between mt-2">
<label v-t="'actions.time_code'" />
<input class="input w-12" type="text" v-model="timeStamp" />
</div>
<a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
<a :href="generatedLink" target="_blank">
<h3 class="mt-4" v-text="generatedLink" />
</a>
<div class="flex justify-end mt-4">
<button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
<button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />
@ -34,6 +40,12 @@ export default {
type: Number,
required: true,
},
playlistId: {
type: String,
},
playlistIndex: {
type: Number,
},
},
components: {
ModalComponent,
@ -42,13 +54,17 @@ export default {
return {
withTimeCode: true,
pipedLink: true,
withPlaylist: true,
timeStamp: null,
hasPlaylist: false,
};
},
mounted() {
this.timeStamp = parseInt(this.currentTime);
this.withTimeCode = this.getPreferenceBoolean("shareWithTimeCode", true);
this.pipedLink = this.getPreferenceBoolean("shareAsPipedLink", true);
this.withPlaylist = this.getPreferenceBoolean("shareWithPlaylist", true);
this.hasPlaylist = this.playlistId != undefined && !isNaN(this.playlistIndex);
},
methods: {
followLink() {
@ -68,6 +84,7 @@ export default {
onChange() {
this.setPreference("shareWithTimeCode", this.withTimeCode, true);
this.setPreference("shareAsPipedLink", this.pipedLink, true);
this.setPreference("shareWithPlaylist", this.withPlaylist, true);
},
},
computed: {
@ -77,6 +94,10 @@ export default {
: "https://youtu.be/" + this.videoId;
var url = new URL(baseUrl);
if (this.withTimeCode && this.timeStamp > 0) url.searchParams.append("t", this.timeStamp);
if (this.hasPlaylist && this.withPlaylist) {
url.searchParams.append("list", this.playlistId);
url.searchParams.append("index", this.playlistIndex);
}
return url.href;
},
},

View file

@ -92,6 +92,8 @@
v-if="showShareModal"
:video-id="getVideoId()"
:current-time="currentTime"
:playlist-id="playlistId"
:playlist-index="index"
@close="showShareModal = !showShareModal"
/>
<div class="flex">

View file

@ -119,7 +119,8 @@
"source_code": "Source code",
"instance_donations": "Instance donations",
"reply_count": "{count} replies",
"no_valid_playlists": "The file doesn't contain valid playlists!"
"no_valid_playlists": "The file doesn't contain valid playlists!",
"with_playlist": "Share with playlist"
},
"comment": {
"pinned_by": "Pinned by {author}",