Mirrored_Repos/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2026-05-03 14:07:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate code to composition api.

Browse Source
This commit is contained in:
Kavin
2026-03-27 00:41:48 +05:30
parent 2448b8aa1d
commit fa5bbbd267
50 changed files with 4506 additions and 4418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
src/components/ShareModal.vue
View File

@@ -32,112 +32,109 @@
</template>
<script setup>
import { defineAsyncComponent } from "vue";
import { ref, computed, onMounted, defineAsyncComponent } from "vue";
import { useI18n } from "vue-i18n";
import ModalComponent from "./ModalComponent.vue";
import { getPreferenceBoolean, setPreference } from "@/composables/usePreferences.js";
const QrCode = defineAsyncComponent(() => import("./QrCode.vue"));
</script>
<script>
import ModalComponent from "./ModalComponent.vue";
export default {
components: {
ModalComponent,
},
props: {
videoId: {
type: String,
required: true,
},
currentTime: {
type: Number,
required: true,
},
playlistId: {
type: String,
default: undefined,
},
playlistIndex: {
type: Number,
default: undefined,
},
},
data() {
return {
withTimeCode: true,
pipedLink: true,
withPlaylist: true,
timeStamp: null,
hasPlaylist: false,
showQrCode: false,
durations: [1, 60, 60 * 60, 60 * 60 * 24],
};
},
computed: {
generatedLink() {
const baseUrl = this.pipedLink
? window.location.origin + "/watch?v=" + this.videoId
: "https://youtu.be/" + this.videoId;
const url = new URL(baseUrl);
if (this.withTimeCode && this.timeStamp)
url.searchParams.append("t", this.parseTimeStampToSeconds(this.timeStamp));
if (this.hasPlaylist && this.withPlaylist) {
url.searchParams.append("list", this.playlistId);
url.searchParams.append("index", this.playlistIndex);
}
return url.href;
},
},
mounted() {
this.timeStamp = this.parseSecondsToTimeStamp(this.currentTime ?? 0);
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() {
window.open(this.generatedLink, "_blank").focus();
},
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"));
}
},
parseTimeStampToSeconds(timestamp) {
const timeArray = timestamp.split(":").reverse();
let seconds = 0;
for (let i = 0; i < timeArray.length; i++) {
seconds += timeArray[i] * this.durations[i];
}
return seconds;
},
parseSecondsToTimeStamp(seconds) {
const timeArray = [];
const durationsReversed = this.durations.toReversed();
for (let i in durationsReversed) {
const currentValue = Math.floor(seconds / durationsReversed[i]);
if (currentValue > 0) {
timeArray.push(currentValue.toString().padStart(2, "0"));
seconds -= currentValue * durationsReversed[i];
}
}
return timeArray.join(":");
},
onChange() {
this.setPreference("shareWithTimeCode", this.withTimeCode, true);
this.setPreference("shareAsPipedLink", this.pipedLink, true);
this.setPreference("shareWithPlaylist", this.withPlaylist, true);
},
},
};
const { t } = useI18n();
const props = defineProps({
videoId: {
type: String,
required: true,
},
currentTime: {
type: Number,
required: true,
},
playlistId: {
type: String,
default: undefined,
},
playlistIndex: {
type: Number,
default: undefined,
},
});
const durations = [1, 60, 60 * 60, 60 * 60 * 24];
const withTimeCode = ref(true);
const pipedLink = ref(true);
const withPlaylist = ref(true);
const timeStamp = ref(null);
const hasPlaylist = ref(false);
const showQrCode = ref(false);
const generatedLink = computed(() => {
const baseUrl = pipedLink.value
? window.location.origin + "/watch?v=" + props.videoId
: "https://youtu.be/" + props.videoId;
const url = new URL(baseUrl);
if (withTimeCode.value && timeStamp.value) url.searchParams.append("t", parseTimeStampToSeconds(timeStamp.value));
if (hasPlaylist.value && withPlaylist.value) {
url.searchParams.append("list", props.playlistId);
url.searchParams.append("index", props.playlistIndex);
}
return url.href;
});
onMounted(() => {
timeStamp.value = parseSecondsToTimeStamp(props.currentTime ?? 0);
withTimeCode.value = getPreferenceBoolean("shareWithTimeCode", true);
pipedLink.value = getPreferenceBoolean("shareAsPipedLink", true);
withPlaylist.value = getPreferenceBoolean("shareWithPlaylist", true);
hasPlaylist.value = props.playlistId != undefined && !isNaN(props.playlistIndex);
});
function followLink() {
window.open(generatedLink.value, "_blank").focus();
}
async function copyLink() {
await copyURL(generatedLink.value);
}
async function copyURL(mytext) {
try {
await navigator.clipboard.writeText(mytext);
alert(t("info.copied"));
} catch ($e) {
alert(t("info.cannot_copy"));
}
}
function parseTimeStampToSeconds(timestamp) {
const timeArray = timestamp.split(":").reverse();
let seconds = 0;
for (let i = 0; i < timeArray.length; i++) {
seconds += timeArray[i] * durations[i];
}
return seconds;
}
function parseSecondsToTimeStamp(seconds) {
const timeArray = [];
const durationsReversed = durations.toReversed();
for (let i in durationsReversed) {
const currentValue = Math.floor(seconds / durationsReversed[i]);
if (currentValue > 0) {
timeArray.push(currentValue.toString().padStart(2, "0"));
seconds -= currentValue * durationsReversed[i];
}
}
return timeArray.join(":");
}
function onChange() {
setPreference("shareWithTimeCode", withTimeCode.value, true);
setPreference("shareAsPipedLink", pipedLink.value, true);
setPreference("shareWithPlaylist", withPlaylist.value, true);
}
</script>