2022-08-28 14:29:11 +00:00
|
|
|
<template>
|
2022-08-28 17:40:35 +00:00
|
|
|
<ModalComponent>
|
2022-09-08 20:56:24 +00:00
|
|
|
<h2 v-t="'actions.share'" />
|
2022-08-28 17:40:35 +00:00
|
|
|
<div class="flex justify-between mt-4">
|
|
|
|
<label v-t="'actions.with_timecode'" for="withTimeCode" />
|
2022-11-02 12:06:13 +00:00
|
|
|
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" @change="onChange" />
|
2022-08-28 14:29:11 +00:00
|
|
|
</div>
|
2022-08-28 17:40:35 +00:00
|
|
|
<div class="flex justify-between">
|
|
|
|
<label v-t="'actions.piped_link'" />
|
2022-11-02 12:06:13 +00:00
|
|
|
<input type="checkbox" v-model="pipedLink" @change="onChange" />
|
2022-08-28 17:40:35 +00:00
|
|
|
</div>
|
|
|
|
<div class="flex justify-between mt-2">
|
|
|
|
<label v-t="'actions.time_code'" />
|
|
|
|
<input class="input w-12" type="text" v-model="timeStamp" />
|
|
|
|
</div>
|
2022-09-08 20:56:24 +00:00
|
|
|
<a :href="generatedLink" target="_blank"><h3 class="mt-4" v-text="generatedLink" /></a>
|
2022-08-28 17:40:35 +00:00
|
|
|
<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()" />
|
|
|
|
</div>
|
|
|
|
</ModalComponent>
|
2022-08-28 14:29:11 +00:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2022-08-28 17:40:35 +00:00
|
|
|
import ModalComponent from "./ModalComponent.vue";
|
|
|
|
|
2022-08-28 14:29:11 +00:00
|
|
|
export default {
|
|
|
|
props: {
|
|
|
|
videoId: {
|
|
|
|
type: String,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
currentTime: {
|
|
|
|
type: Number,
|
|
|
|
required: true,
|
|
|
|
},
|
|
|
|
},
|
2022-08-28 17:40:35 +00:00
|
|
|
components: {
|
|
|
|
ModalComponent,
|
|
|
|
},
|
2022-08-28 14:29:11 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
withTimeCode: true,
|
|
|
|
pipedLink: true,
|
2022-08-28 14:58:56 +00:00
|
|
|
timeStamp: null,
|
2022-08-28 14:29:11 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
mounted() {
|
2022-08-28 14:58:56 +00:00
|
|
|
this.timeStamp = parseInt(this.currentTime);
|
2022-11-02 12:06:13 +00:00
|
|
|
this.withTimeCode = this.getPreferenceBoolean("shareWithTimeCode", true);
|
|
|
|
this.pipedLink = this.getPreferenceBoolean("shareAsPipedLink", true);
|
2022-08-28 14:29:11 +00:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
followLink() {
|
2022-08-28 14:35:40 +00:00
|
|
|
window.open(this.generatedLink, "_blank").focus();
|
2022-08-28 14:29:11 +00:00
|
|
|
},
|
2022-08-28 14:35:40 +00:00
|
|
|
async copyLink() {
|
|
|
|
await this.copyURL(this.generatedLink);
|
|
|
|
},
|
|
|
|
async copyURL(mytext) {
|
|
|
|
try {
|
|
|
|
await navigator.clipboard.writeText(mytext);
|
|
|
|
alert(this.$t("info.copied"));
|
|
|
|
} catch ($e) {
|
|
|
|
alert(this.$t("info.cannot_copy"));
|
|
|
|
}
|
2022-08-28 14:29:11 +00:00
|
|
|
},
|
2022-11-02 12:06:13 +00:00
|
|
|
onChange() {
|
|
|
|
localStorage.setItem("shareWithTimeCode", this.withTimeCode);
|
|
|
|
localStorage.setItem("shareAsPipedLink", this.pipedLink);
|
|
|
|
},
|
2022-08-28 14:29:11 +00:00
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
generatedLink() {
|
2022-09-02 13:37:14 +00:00
|
|
|
var baseUrl = this.pipedLink
|
2022-08-28 14:29:11 +00:00
|
|
|
? window.location.origin + "/watch?v=" + this.videoId
|
|
|
|
: "https://youtu.be/" + this.videoId;
|
2022-09-02 13:37:14 +00:00
|
|
|
var url = new URL(baseUrl);
|
|
|
|
if (this.withTimeCode && this.timeStamp > 0) url.searchParams.append("t", this.timeStamp);
|
|
|
|
return url.href;
|
2022-08-28 14:29:11 +00:00
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|