mirror of
https://github.com/TeamPiped/Piped.git
synced 2026-08-20 20:51:26 +00:00
820 lines
34 KiB
Vue
820 lines
34 KiB
Vue
<template>
|
|
<div v-if="video && isEmbed" class="absolute top-0 left-0 z-50 size-full bg-black">
|
|
<VideoPlayer
|
|
ref="videoPlayer"
|
|
:video="video"
|
|
:sponsors="sponsors"
|
|
:selected-auto-play="false"
|
|
:selected-auto-loop="selectedAutoLoop"
|
|
:is-embed="isEmbed"
|
|
/>
|
|
</div>
|
|
<div id="theaterModeSpot" class="-mx-[1vw]"></div>
|
|
<LoadingIndicatorPage :show-content="video != null && !isEmbed" class="w-full">
|
|
<ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
|
|
<Transition>
|
|
<ToastComponent v-if="shouldShowToast" @dismissed="dismiss">
|
|
<i18n-t keypath="info.next_video_countdown">{{ counter }}</i18n-t>
|
|
</ToastComponent>
|
|
</Transition>
|
|
<div v-show="!video.error" class="flex gap-5">
|
|
<div class="min-w-0 flex-auto">
|
|
<Teleport defer to="#theaterModeSpot" :disabled="!theaterMode">
|
|
<div class="flex flex-row">
|
|
<keep-alive>
|
|
<VideoPlayer
|
|
ref="videoPlayer"
|
|
:video="video"
|
|
:sponsors="sponsors"
|
|
:selected-auto-play="selectedAutoPlayEnabled"
|
|
:selected-auto-loop="selectedAutoLoop"
|
|
@timeupdate="onTimeUpdate"
|
|
@ended="onVideoEnded"
|
|
@navigate-next="navigateNext"
|
|
/>
|
|
</keep-alive>
|
|
<button
|
|
v-if="!isMobile"
|
|
:class="theaterMode ? '-ml-5' : '-mr-5'"
|
|
class="z-10 text-white"
|
|
@click="
|
|
theaterMode = !theaterMode;
|
|
setPreference('theaterMode', theaterMode);
|
|
"
|
|
>
|
|
<div>
|
|
<i-fa6-solid-chevron-left v-if="theaterMode" />
|
|
<i-fa6-solid-chevron-right v-else />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</Teleport>
|
|
<div v-if="video && isMobile">
|
|
<PlaylistVideos
|
|
v-if="playlist"
|
|
:playlist-id="playlistId"
|
|
:playlist="playlist"
|
|
:selected-index="index"
|
|
:prefer-listen="isListening"
|
|
/>
|
|
<ChaptersBar
|
|
v-if="video?.chapters?.length > 0 && showChapters"
|
|
:mobile-layout="true"
|
|
:chapters="video.chapters"
|
|
:player-position="currentTime"
|
|
@seek="navigate"
|
|
/>
|
|
</div>
|
|
<!-- video title -->
|
|
<div class="mt-2 text-2xl font-bold wrap-break-word" v-text="video.title" />
|
|
<div class="my-3 flex flex-wrap">
|
|
<!-- views / date -->
|
|
<div class="flex flex-auto gap-2">
|
|
<span v-t="{ path: 'video.views', args: { views: addCommas(video.views) } }" />
|
|
<span> | </span>
|
|
<span :title="new Date(video.uploadDate).toLocaleString()" v-text="uploadDate" />
|
|
</div>
|
|
<!-- Likes/dilikes -->
|
|
<div class="flex gap-2">
|
|
<template v-if="video.likes >= 0">
|
|
<div class="flex items-center">
|
|
<i-fa6-solid-thumbs-up />
|
|
<strong class="ml-1" v-text="addCommas(video.likes)" />
|
|
</div>
|
|
<div class="flex items-center">
|
|
<i-fa6-solid-thumbs-down />
|
|
<strong class="ml-1" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
|
|
</div>
|
|
</template>
|
|
<template v-if="video.likes < 0">
|
|
<div>
|
|
<strong v-t="'video.ratings_disabled'" />
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<!-- Channel info & options flex container -->
|
|
<div class="flex flex-wrap gap-1">
|
|
<!-- Channel Image & Info -->
|
|
<div class="flex items-center">
|
|
<img
|
|
loading="lazy"
|
|
height="48"
|
|
width="48"
|
|
:src="video.uploaderAvatar"
|
|
alt=""
|
|
class="rounded-full"
|
|
/>
|
|
<router-link
|
|
v-if="video.uploaderUrl"
|
|
class="ml-1.5 hover:text-red-500 focus:text-red-500 dark:hover:text-red-400 dark:focus:text-red-400"
|
|
:to="video.uploaderUrl"
|
|
>{{ video.uploader }}</router-link
|
|
>
|
|
<!-- Verified Badge -->
|
|
<i-fa6-solid-check v-if="video.uploaderVerified" class="ml-1" />
|
|
</div>
|
|
<PlaylistAddModal
|
|
v-if="showModal"
|
|
:video-id="getVideoId()"
|
|
:video-info="video"
|
|
@close="showModal = !showModal"
|
|
/>
|
|
<ShareModal
|
|
v-if="showShareModal"
|
|
:video-id="getVideoId()"
|
|
:current-time="currentTime"
|
|
:playlist-id="playlistId"
|
|
:playlist-index="index"
|
|
@close="showShareModal = !showShareModal"
|
|
/>
|
|
<div class="ml-auto flex flex-wrap gap-1 items-center">
|
|
<!-- Subscribe Button -->
|
|
<button
|
|
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:hidden max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="downloadCurrentFrame"
|
|
>
|
|
<span>{{ $t("actions.download_frame") }}</span>
|
|
<i-fa6-solid-download class="ml-1" />
|
|
</button>
|
|
<button
|
|
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="showModal = !showModal"
|
|
>
|
|
<span>{{ $t("actions.add_to_playlist") }}</span>
|
|
<i-fa6-solid-circle-plus class="ml-1" />
|
|
</button>
|
|
<button
|
|
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="subscribeHandler"
|
|
>
|
|
<span>
|
|
{{
|
|
$t("actions." + (subscribed ? "unsubscribe" : "subscribe")) +
|
|
" - " +
|
|
numberFormat(video.uploaderSubscriberCount)
|
|
}}
|
|
</span>
|
|
</button>
|
|
<div class="flex flex-wrap gap-1 items-center">
|
|
<!-- RSS Feed button -->
|
|
<a
|
|
v-if="video.uploaderUrl"
|
|
aria-label="RSS feed"
|
|
title="RSS feed"
|
|
role="button"
|
|
:href="`${apiUrl()}/feed/unauthenticated/rss?channels=${video.uploaderUrl.split('/')[2]}`"
|
|
target="_blank"
|
|
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
>
|
|
<i-fa6-solid-rss class="mx-1.5" />
|
|
</a>
|
|
<!-- Share Dialog -->
|
|
<button
|
|
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="showShareModal = !showShareModal"
|
|
>
|
|
<strong class="max-lg:hidden">
|
|
<i18n-t keypath="actions.share" tag="span"></i18n-t>
|
|
</strong>
|
|
<i-fa6-solid-share class="mx-1.5" />
|
|
</button>
|
|
<!-- YouTube -->
|
|
<WatchOnButton :link="youtubeVideoHref" />
|
|
<!-- Odysee -->
|
|
<WatchOnButton
|
|
v-if="video.lbryId"
|
|
:link="`https://odysee.com/${video.lbryId}`"
|
|
platform="Odysee"
|
|
/>
|
|
<!-- listen / watch toggle -->
|
|
<router-link
|
|
:to="toggleListenUrl"
|
|
:aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
|
:title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
|
|
class="inline-flex items-center w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
>
|
|
<span>
|
|
<i-fa6-solid-tv v-if="isListening" class="mx-1.5" />
|
|
<i-fa6-solid-headphones v-else class="mx-1.5" />
|
|
</span>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mb-2" />
|
|
|
|
<div
|
|
v-for="metaInfo in video?.metaInfo ?? []"
|
|
:key="metaInfo.title"
|
|
class="my-3 inline-block w-auto cursor-default rounded-sm bg-gray-300 px-4 py-2 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
|
|
>
|
|
<span>{{ metaInfo.description ?? metaInfo.title }}</span>
|
|
<a v-for="(link, linkIndex) in metaInfo.urls" :key="linkIndex" :href="link" class="underline">{{
|
|
metaInfo.urlTexts[linkIndex]
|
|
}}</a>
|
|
<br />
|
|
</div>
|
|
|
|
<button
|
|
v-t="`actions.${showDesc ? 'minimize_description' : 'show_description'}`"
|
|
class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="showDesc = !showDesc"
|
|
/>
|
|
|
|
<span
|
|
v-show="video?.chapters?.length > 0"
|
|
class="ml-2 inline-block w-auto cursor-default rounded-sm bg-gray-300 py-2 text-gray-600 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400"
|
|
>
|
|
<UiCheckbox id="showChapters" v-model="showChapters" />
|
|
<label v-t="'actions.show_chapters'" class="ml-2" for="showChapters" />
|
|
</span>
|
|
|
|
<template v-if="showDesc">
|
|
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
<div class="wrap-break-word [&_a]:underline [&_a]:brightness-75" v-html="purifiedDescription" />
|
|
<br />
|
|
|
|
<div
|
|
v-if="sponsors && sponsors.segments"
|
|
v-text="`${$t('video.sponsor_segments')}: ${sponsors.segments.length}`"
|
|
/>
|
|
<div v-if="video.category" v-text="`${$t('video.category')}: ${video.category}`" />
|
|
<div v-text="`${$t('video.license')}: ${video.license}`" />
|
|
<div class="capitalize" v-text="`${$t('video.visibility')}: ${video.visibility}`" />
|
|
|
|
<div v-if="video.tags" class="mt-2 flex flex-wrap gap-2">
|
|
<router-link
|
|
v-for="tag in video.tags"
|
|
:key="tag"
|
|
class="line-clamp-1 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 px-2 py-1 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
:to="`/results?search_query=${encodeURIComponent(tag)}`"
|
|
>{{ tag }}</router-link
|
|
>
|
|
</div>
|
|
</template>
|
|
|
|
<hr />
|
|
|
|
<label for="chkAutoLoop"><strong v-text="`${$t('actions.loop_this_video')}:`" /></label>
|
|
<UiCheckbox id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" @change="onChange($event)" />
|
|
<br />
|
|
<label for="chkAutoPlay"><strong v-text="`${$t('actions.auto_play_next_video')}:`" /></label>
|
|
<select
|
|
id="chkAutoPlay"
|
|
v-model.number="selectedAutoPlay"
|
|
class="ml-1.5 h-8 rounded-md bg-gray-300 px-2.5 text-gray-600 dark:bg-dark-400 dark:text-gray-400"
|
|
@change="onChange($event)"
|
|
>
|
|
<option v-t="'actions.never'" value="0" />
|
|
<option v-t="'actions.playlists_only'" value="1" />
|
|
<option v-t="'actions.always'" value="2" />
|
|
</select>
|
|
|
|
<hr />
|
|
<a
|
|
v-t="`actions.${showRecs ? 'minimize_recommendations' : 'show_recommendations'}`"
|
|
class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="showRecs = !showRecs"
|
|
/>
|
|
<div v-if="isMobile">
|
|
<hr v-show="showRecs" />
|
|
<div v-show="showRecs">
|
|
<ContentItem
|
|
v-for="related in video.relatedStreams"
|
|
:key="related.url"
|
|
:item="related"
|
|
:prefer-listen="isListening"
|
|
class="mb-4"
|
|
height="94"
|
|
width="168"
|
|
/>
|
|
</div>
|
|
<hr class="" />
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
<div class="">
|
|
<button
|
|
v-if="!comments?.disabled"
|
|
class="mb-2 inline-block w-auto cursor-pointer rounded-sm bg-gray-300 py-2 text-gray-600 hover:bg-gray-500 hover:text-white focus:shadow-red-400 focus:outline-2 focus:outline-red-500 max-md:px-2 md:px-4 dark:bg-dark-400 dark:text-gray-400 dark:hover:bg-dark-300"
|
|
@click="toggleCommentsVisibility"
|
|
v-text="
|
|
`${$t(
|
|
showComments ? 'actions.minimize_comments' : 'actions.show_comments',
|
|
)} (${numberFormat(comments?.commentCount)})`
|
|
"
|
|
/>
|
|
</div>
|
|
<div v-if="!showComments" class=""></div>
|
|
<div v-else-if="!comments" class="">
|
|
<p v-t="'comment.loading'" class="mt-8 text-center"></p>
|
|
</div>
|
|
<div v-else-if="comments.disabled" class="">
|
|
<p v-t="'comment.disabled'" class="mt-8 text-center"></p>
|
|
</div>
|
|
<div v-else ref="commentsEl" class="">
|
|
<CommentItem
|
|
v-for="comment in comments.comments"
|
|
:key="comment.commentId"
|
|
:comment="comment"
|
|
:uploader="video.uploader"
|
|
:uploader-avatar-url="video.uploaderAvatar"
|
|
:video-id="getVideoId()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="video && showDesktopSidebar" class="w-96 flex-none">
|
|
<ChaptersBar
|
|
v-if="video?.chapters?.length > 0 && showChapters"
|
|
:mobile-layout="isMobile"
|
|
:chapters="video.chapters"
|
|
:player-position="currentTime"
|
|
@seek="navigate"
|
|
/>
|
|
<PlaylistVideos
|
|
v-if="playlist"
|
|
:playlist-id="playlistId"
|
|
:playlist="playlist"
|
|
:selected-index="index"
|
|
:prefer-listen="isListening"
|
|
/>
|
|
<hr v-show="showRecs" />
|
|
<div v-show="showRecs">
|
|
<ContentItem
|
|
v-for="related in video.relatedStreams"
|
|
:key="related.url"
|
|
:item="related"
|
|
:prefer-listen="isListening"
|
|
class="mb-4"
|
|
height="94"
|
|
width="168"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</LoadingIndicatorPage>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, onMounted, onActivated, onDeactivated, onUnmounted } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
import VideoPlayer from "./VideoPlayer.vue";
|
|
import ContentItem from "./ContentItem.vue";
|
|
import ErrorHandler from "./ErrorHandler.vue";
|
|
import CommentItem from "./CommentItem.vue";
|
|
import ChaptersBar from "./ChaptersBar.vue";
|
|
import PlaylistAddModal from "./PlaylistAddModal.vue";
|
|
import ShareModal from "./ShareModal.vue";
|
|
import PlaylistVideos from "./PlaylistVideos.vue";
|
|
import WatchOnButton from "./WatchOnButton.vue";
|
|
import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
|
|
import ToastComponent from "./ToastComponent.vue";
|
|
import UiCheckbox from "./ui/Checkbox.vue";
|
|
import { parseTimeParam } from "@/utils/Misc";
|
|
import { purifyHTML, rewriteDescription } from "@/utils/HtmlUtils";
|
|
import { fetchJson, apiUrl } from "@/composables/useApi.js";
|
|
import {
|
|
getPreferenceBoolean,
|
|
getPreferenceNumber,
|
|
getPreferenceString,
|
|
getPreferenceJSON,
|
|
setPreference,
|
|
} from "@/composables/usePreferences.js";
|
|
import { numberFormat, addCommas } from "@/composables/useFormatting.js";
|
|
import {
|
|
fetchSubscriptionStatus,
|
|
toggleSubscriptionState,
|
|
fetchDeArrowContent,
|
|
} from "@/composables/useSubscriptions.js";
|
|
import { updateWatched } from "@/composables/useMisc.js";
|
|
import { getPlaylist } from "@/composables/usePlaylists.js";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const smallViewQuery = window.matchMedia("(max-width: 640px)");
|
|
|
|
const videoPlayer = ref(null);
|
|
const commentsEl = ref(null);
|
|
|
|
const video = ref(null);
|
|
const playlistId = ref(null);
|
|
const playlist = ref(null);
|
|
const index = ref(null);
|
|
const sponsors = ref(null);
|
|
const selectedAutoLoop = ref(false);
|
|
const selectedAutoPlay = ref(null);
|
|
const showComments = ref(true);
|
|
const showDesc = ref(false);
|
|
const showRecs = ref(true);
|
|
const showChapters = ref(true);
|
|
const comments = ref(null);
|
|
const subscribed = ref(false);
|
|
const channelId = ref(null);
|
|
const active = ref(true);
|
|
const smallView = ref(smallViewQuery.matches);
|
|
const showModal = ref(false);
|
|
const showShareModal = ref(false);
|
|
const isMobile = ref(true);
|
|
const currentTime = ref(0);
|
|
const shouldShowToast = ref(false);
|
|
let timeoutCounter = null;
|
|
const counter = ref(0);
|
|
const theaterMode = ref(false);
|
|
let loading = false;
|
|
|
|
const isListening = computed(() => {
|
|
return getPreferenceBoolean("listen", false);
|
|
});
|
|
|
|
const selectedAutoPlayEnabled = computed(() => {
|
|
return Number(selectedAutoPlay.value) >= 1;
|
|
});
|
|
|
|
const showDesktopSidebar = computed(() => {
|
|
return (
|
|
!isMobile.value &&
|
|
(showRecs.value || Boolean(playlist.value) || (video.value?.chapters?.length > 0 && showChapters.value))
|
|
);
|
|
});
|
|
|
|
const toggleListenUrl = computed(() => {
|
|
const url = new URL(window.location.href);
|
|
url.searchParams.set("listen", isListening.value ? "0" : "1");
|
|
url.searchParams.set("t", Math.floor(currentTime.value));
|
|
return url.pathname + url.search;
|
|
});
|
|
|
|
const isEmbed = computed(() => {
|
|
return String(route.path).indexOf("/embed/") == 0;
|
|
});
|
|
|
|
const uploadDate = computed(() => {
|
|
return new Date(video.value.uploadDate).toLocaleString(undefined, {
|
|
month: "short",
|
|
day: "numeric",
|
|
year: "numeric",
|
|
});
|
|
});
|
|
|
|
const defaultCounter = computed(() => {
|
|
return getPreferenceNumber("autoPlayNextCountdown", 5);
|
|
});
|
|
|
|
const purifiedDescription = computed(() => {
|
|
return purifyHTML(video.value.description);
|
|
});
|
|
|
|
const youtubeVideoHref = computed(() => {
|
|
let link = `https://youtu.be/${getVideoId()}?t=${Math.round(currentTime.value)}`;
|
|
if (playlistId.value) link += `&list=${playlistId.value}`;
|
|
return link;
|
|
});
|
|
|
|
function fetchVideo() {
|
|
return fetchJson(apiUrl() + "/streams/" + getVideoId());
|
|
}
|
|
|
|
async function fetchSponsors() {
|
|
var selectedSkip = getPreferenceString("selectedSkip", "sponsor,interaction,selfpromo,music_offtopic").split(",");
|
|
const skipOptions = getPreferenceJSON("skipOptions");
|
|
if (skipOptions !== undefined) {
|
|
selectedSkip = Object.keys(skipOptions).filter(k => skipOptions[k] !== undefined && skipOptions[k] !== "no");
|
|
}
|
|
|
|
const sponsorsData = await fetchJson(apiUrl() + "/sponsors/" + getVideoId(), {
|
|
category: JSON.stringify(selectedSkip),
|
|
});
|
|
|
|
sponsorsData?.segments?.forEach(segment => {
|
|
const option = skipOptions?.[segment.category];
|
|
segment.autoskip = option === undefined || option === "auto";
|
|
});
|
|
|
|
const minSegmentLength = Math.max(getPreferenceNumber("minSegmentLength", 0), 0);
|
|
sponsorsData.segments = sponsorsData.segments?.filter(segment => {
|
|
const length = segment.segment[1] - segment.segment[0];
|
|
return length >= minSegmentLength;
|
|
});
|
|
|
|
return sponsorsData;
|
|
}
|
|
|
|
function toggleCommentsVisibility() {
|
|
showComments.value = !showComments.value;
|
|
if (showComments.value && comments.value === null) {
|
|
fetchCommentsData();
|
|
}
|
|
}
|
|
|
|
function fetchCommentsData() {
|
|
return fetchJson(apiUrl() + "/comments/" + getVideoId());
|
|
}
|
|
|
|
function onChange() {
|
|
setPreference("autoplay", selectedAutoPlay.value, true);
|
|
}
|
|
|
|
async function getVideoData() {
|
|
await fetchVideo()
|
|
.then(data => {
|
|
video.value = data;
|
|
video.value.id = getVideoId();
|
|
})
|
|
.then(() => {
|
|
if (!video.value.error) {
|
|
document.title = video.value.title + " - Piped";
|
|
channelId.value = video.value.uploaderUrl.split("/")[2];
|
|
if (!isEmbed.value) fetchSubscribedStatus();
|
|
|
|
const parser = new DOMParser();
|
|
const xmlDoc = parser.parseFromString(video.value.description, "text/html");
|
|
xmlDoc.querySelectorAll("a").forEach(elem => {
|
|
if (!elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/))
|
|
elem.outerHTML = elem.getAttribute("href");
|
|
});
|
|
xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
|
|
video.value.description = rewriteDescription(xmlDoc.querySelector("body").innerHTML);
|
|
updateWatched(video.value.relatedStreams);
|
|
|
|
fetchDeArrowContent(video.value.relatedStreams);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function getPlaylistData() {
|
|
if (playlistId.value) {
|
|
playlist.value = await getPlaylist(playlistId.value);
|
|
await fetchPlaylistPages().then(() => {
|
|
if (!(index.value >= 0)) {
|
|
for (let i = 0; i < playlist.value.relatedStreams.length; i++)
|
|
if (playlist.value.relatedStreams[i].url.substr(-11) == getVideoId()) {
|
|
index.value = i + 1;
|
|
router.replace({
|
|
query: { ...route.query, index: index.value },
|
|
});
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
await fetchPlaylistPages();
|
|
}
|
|
}
|
|
|
|
async function fetchPlaylistPages() {
|
|
if (playlist.value.nextpage) {
|
|
await fetchJson(apiUrl() + "/nextpage/playlists/" + playlistId.value, {
|
|
nextpage: playlist.value.nextpage,
|
|
}).then(json => {
|
|
playlist.value.relatedStreams.push(...json.relatedStreams);
|
|
playlist.value.nextpage = json.nextpage;
|
|
fetchDeArrowContent(json.relatedStreams);
|
|
});
|
|
await fetchPlaylistPages();
|
|
}
|
|
}
|
|
|
|
async function getSponsors() {
|
|
if (getPreferenceBoolean("sponsorblock", true)) fetchSponsors().then(data => (sponsors.value = data));
|
|
}
|
|
|
|
async function getComments() {
|
|
comments.value = await fetchCommentsData();
|
|
}
|
|
|
|
async function fetchSubscribedStatus() {
|
|
if (!channelId.value) return;
|
|
subscribed.value = await fetchSubscriptionStatus(channelId.value);
|
|
}
|
|
|
|
function subscribeHandler() {
|
|
toggleSubscriptionState(channelId.value, subscribed.value).then(success => {
|
|
if (success) subscribed.value = !subscribed.value;
|
|
});
|
|
}
|
|
|
|
function handleClick(event) {
|
|
if (!event || !event.target) return;
|
|
if (!event.target.matches("a[href]")) return;
|
|
const target = event.target;
|
|
if (!target.getAttribute("href")) return;
|
|
if (handleTimestampLinks(target)) {
|
|
event.preventDefault();
|
|
}
|
|
}
|
|
|
|
function handleTimestampLinks(target) {
|
|
try {
|
|
const url = new URL(target.getAttribute("href"), document.baseURI);
|
|
if (url.searchParams.size > 2 || url.searchParams.get("v") !== getVideoId() || !url.searchParams.has("t")) {
|
|
return false;
|
|
}
|
|
const time = parseTimeParam(url.searchParams.get("t"));
|
|
if (time) {
|
|
navigate(time);
|
|
}
|
|
return true;
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function handleScroll() {
|
|
if (loading || !comments.value || !comments.value.nextpage) return;
|
|
if (window.innerHeight + window.scrollY >= commentsEl.value?.offsetHeight - window.innerHeight) {
|
|
loading = true;
|
|
fetchJson(apiUrl() + "/nextpage/comments/" + getVideoId(), {
|
|
nextpage: comments.value.nextpage,
|
|
}).then(json => {
|
|
comments.value.nextpage = json.nextpage;
|
|
loading = false;
|
|
comments.value.comments = comments.value.comments.concat(json.comments);
|
|
});
|
|
}
|
|
}
|
|
|
|
function getVideoId() {
|
|
if (route.query.video_ids) {
|
|
const videos_list = route.query.video_ids.split(",");
|
|
index.value = Number(route.query.index ?? 0);
|
|
return videos_list[index.value];
|
|
}
|
|
|
|
return route.query.v || route.params.v;
|
|
}
|
|
|
|
function navigate(time) {
|
|
videoPlayer.value.seek(time);
|
|
}
|
|
|
|
function onTimeUpdate(time) {
|
|
currentTime.value = time;
|
|
}
|
|
|
|
function onVideoEnded() {
|
|
if (
|
|
!selectedAutoLoop.value &&
|
|
((selectedAutoPlay.value >= 1 && playlist.value?.relatedStreams?.length > index.value) ||
|
|
(selectedAutoPlay.value >= 2 && video.value.relatedStreams.length > 0))
|
|
) {
|
|
showToast();
|
|
}
|
|
}
|
|
|
|
function showToast() {
|
|
counter.value = defaultCounter.value;
|
|
if (counter.value < 1) {
|
|
navigateNext();
|
|
return;
|
|
}
|
|
if (timeoutCounter) clearInterval(timeoutCounter);
|
|
timeoutCounter = setInterval(() => {
|
|
counter.value--;
|
|
if (counter.value === 0) {
|
|
dismiss();
|
|
navigateNext();
|
|
}
|
|
}, 1000);
|
|
shouldShowToast.value = true;
|
|
}
|
|
|
|
function dismiss() {
|
|
clearInterval(timeoutCounter);
|
|
shouldShowToast.value = false;
|
|
}
|
|
|
|
function navigateNext() {
|
|
const params = route.query;
|
|
const video_ids = route.query.video_ids?.split(",") ?? [];
|
|
let url;
|
|
if (playlist.value) {
|
|
url = playlist.value?.relatedStreams?.[index.value]?.url ?? video.value.relatedStreams[0].url;
|
|
} else if (video_ids.length > index.value + 1) {
|
|
url = `${route.path}?index=${index.value + 1}`;
|
|
} else {
|
|
url = video.value.relatedStreams[0].url;
|
|
}
|
|
const searchParams = new URLSearchParams();
|
|
for (var param in params)
|
|
switch (param) {
|
|
case "v":
|
|
case "t":
|
|
break;
|
|
case "index":
|
|
if (playlist.value && index.value < playlist.value.relatedStreams.length)
|
|
searchParams.set("index", index.value + 1);
|
|
break;
|
|
case "list":
|
|
if (index.value < playlist.value.relatedStreams.length) searchParams.set("list", params.list);
|
|
break;
|
|
default:
|
|
searchParams.set(param, params[param]);
|
|
break;
|
|
}
|
|
searchParams.set("fullscreen", videoPlayer.value.isFullScreenEnabled());
|
|
const paramStr = searchParams.toString();
|
|
if (paramStr.length > 0) url += "&" + paramStr;
|
|
router.push(url);
|
|
}
|
|
|
|
function downloadCurrentFrame() {
|
|
const videoEl = document.querySelector("video");
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = videoEl.videoWidth;
|
|
canvas.height = videoEl.videoHeight;
|
|
|
|
const context = canvas.getContext("2d");
|
|
context.drawImage(videoEl, 0, 0, canvas.width, canvas.height);
|
|
|
|
let link = document.createElement("a");
|
|
const ct = Math.round(videoEl.currentTime * 1000) / 1000;
|
|
link.download = `${video.value.title}_${ct}s.png`;
|
|
link.href = canvas.toDataURL();
|
|
link.click();
|
|
}
|
|
|
|
onMounted(() => {
|
|
isMobile.value = window.innerWidth < 1024;
|
|
window.addEventListener("resize", () => {
|
|
isMobile.value = window.innerWidth < 1024;
|
|
});
|
|
getVideoData().then(() => {
|
|
(async () => {
|
|
const videoId = getVideoId();
|
|
if (window.db && getPreferenceBoolean("watchHistory", false) && !video.value.error) {
|
|
var tx = window.db.transaction("watch_history", "readwrite");
|
|
var store = tx.objectStore("watch_history");
|
|
var request = store.get(videoId);
|
|
request.onsuccess = function (event) {
|
|
var vid = event.target.result;
|
|
if (vid) {
|
|
vid.watchedAt = Date.now();
|
|
} else {
|
|
vid = {
|
|
videoId: videoId,
|
|
title: video.value.title,
|
|
duration: video.value.duration,
|
|
thumbnail: video.value.thumbnailUrl,
|
|
uploaderUrl: video.value.uploaderUrl,
|
|
uploaderName: video.value.uploader,
|
|
watchedAt: Date.now(),
|
|
};
|
|
}
|
|
store.put(vid);
|
|
};
|
|
}
|
|
})();
|
|
if (active.value) videoPlayer.value.loadVideo();
|
|
});
|
|
playlistId.value = route.query.list;
|
|
index.value = Number(route.query.index);
|
|
getPlaylistData();
|
|
getSponsors();
|
|
if (!isEmbed.value && showComments.value) getComments();
|
|
if (isEmbed.value) document.querySelector("html").style.overflow = "hidden";
|
|
window.addEventListener("click", handleClick);
|
|
window.addEventListener("resize", () => {
|
|
smallView.value = smallViewQuery.matches;
|
|
});
|
|
});
|
|
|
|
onActivated(() => {
|
|
active.value = true;
|
|
theaterMode.value = getPreferenceBoolean("theaterMode", window.innerWidth < (window.innerHeight * 4) / 3 + 467);
|
|
selectedAutoPlay.value = getPreferenceNumber("autoplay", 1);
|
|
showComments.value = !getPreferenceBoolean("minimizeComments", false);
|
|
showDesc.value = !getPreferenceBoolean("minimizeDescription", true);
|
|
showRecs.value = !getPreferenceBoolean("minimizeRecommendations", false);
|
|
showChapters.value = !getPreferenceBoolean("minimizeChapters", false);
|
|
if (video.value?.duration) {
|
|
document.title = video.value.title + " - Piped";
|
|
videoPlayer.value.loadVideo();
|
|
}
|
|
window.addEventListener("scroll", handleScroll);
|
|
});
|
|
|
|
onDeactivated(() => {
|
|
active.value = false;
|
|
window.removeEventListener("scroll", handleScroll);
|
|
dismiss();
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
window.removeEventListener("scroll", handleScroll);
|
|
window.removeEventListener("click", handleClick);
|
|
dismiss();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.v-enter-from,
|
|
.v-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(100%) scale(0.5);
|
|
}
|
|
</style>
|