Piped/src/components/ShareModal.vue

79 lines
2.3 KiB
Vue
Raw Normal View History

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" />
<input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
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'" />
<input type="checkbox" v-model="pipedLink" />
</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-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
},
},
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>