chore(frontend): fix formatting

This commit is contained in:
Oleg Lobanov 2024-06-08 22:20:58 +02:00
parent d6cdf0e435
commit eb3978ea55
No known key found for this signature in database
4 changed files with 59 additions and 59 deletions

View File

@ -1,8 +1,14 @@
<template> <template>
<video ref="videoPlayer" class="video-max video-js" controls preload="auto"> <video ref="videoPlayer" class="video-max video-js" controls preload="auto">
<source /> <source />
<track kind="subtitles" v-for="(sub, index) in subtitles" :key="index" :src="sub" :label="subLabel(sub)" <track
:default="index === 0" /> kind="subtitles"
v-for="(sub, index) in subtitles"
:key="index"
:src="sub"
:label="subLabel(sub)"
:default="index === 0"
/>
<p class="vjs-no-js"> <p class="vjs-no-js">
Sorry, your browser doesn't support embedded videos, but don't worry, you Sorry, your browser doesn't support embedded videos, but don't worry, you
can <a :href="source">download it</a> can <a :href="source">download it</a>
@ -12,7 +18,7 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, nextTick, } from "vue"; import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import videojs from "video.js"; import videojs from "video.js";
import type Player from "video.js/dist/types/player"; import type Player from "video.js/dist/types/player";
import "videojs-mobile-ui"; import "videojs-mobile-ui";
@ -23,7 +29,6 @@ import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
const videoPlayer = ref<HTMLElement | null>(null); const videoPlayer = ref<HTMLElement | null>(null);
const player = ref<Player | null>(null); const player = ref<Player | null>(null);
const props = withDefaults( const props = withDefaults(
defineProps<{ defineProps<{
source: string; source: string;
@ -35,14 +40,14 @@ const props = withDefaults(
} }
); );
const source = ref(props.source) const source = ref(props.source);
const sourceType = ref("") const sourceType = ref("");
nextTick(() => { nextTick(() => {
initVideoPlayer() initVideoPlayer();
}) });
onMounted(() => { }); onMounted(() => {});
onBeforeUnmount(() => { onBeforeUnmount(() => {
if (player.value) { if (player.value) {
@ -54,21 +59,22 @@ onBeforeUnmount(() => {
const initVideoPlayer = async () => { const initVideoPlayer = async () => {
try { try {
const lang = document.documentElement.lang; const lang = document.documentElement.lang;
const languagePack = await (languageImports[lang] || languageImports.en)?.(); const languagePack = await (
videojs.addLanguage('videoPlayerLocal', languagePack.default); languageImports[lang] || languageImports.en
sourceType.value = "" )?.();
videojs.addLanguage("videoPlayerLocal", languagePack.default);
sourceType.value = "";
// //
sourceType.value = getSourceType(source.value); sourceType.value = getSourceType(source.value);
const srcOpt = { sources: { src: props.source, type: sourceType.value } } const srcOpt = { sources: { src: props.source, type: sourceType.value } };
//Supporting localized language display. //Supporting localized language display.
const langOpt = { language: "videoPlayerLocal" } const langOpt = { language: "videoPlayerLocal" };
// support for playback at different speeds. // support for playback at different speeds.
const playbackRatesOpt = { playbackRates: [0.5, 1, 1.5, 2, 2.5, 3] } const playbackRatesOpt = { playbackRates: [0.5, 1, 1.5, 2, 2.5, 3] };
let options = getOptions(props.options, langOpt, srcOpt, playbackRatesOpt) let options = getOptions(props.options, langOpt, srcOpt, playbackRatesOpt);
player.value = videojs(videoPlayer.value!, options, () => { player.value = videojs(videoPlayer.value!, options, () => {});
});
// TODO: need to test on mobile // TODO: need to test on mobile
// @ts-ignore // @ts-ignore
@ -76,18 +82,16 @@ const initVideoPlayer = async () => {
} catch (error) { } catch (error) {
console.error("Error initializing video player:", error); console.error("Error initializing video player:", error);
} }
};
}
const getOptions = (...srcOpt: any[]) => { const getOptions = (...srcOpt: any[]) => {
const options = { const options = {
controlBar: { controlBar: {
skipButtons: { skipButtons: {
forward: 5, forward: 5,
backward: 5 backward: 5,
} },
},
},
html5: { html5: {
nativeTextTracks: false, nativeTextTracks: false,
}, },
@ -101,7 +105,7 @@ const getOptions = (...srcOpt: any[]) => {
}; };
return videojs.obj.merge(options, ...srcOpt); return videojs.obj.merge(options, ...srcOpt);
} };
// Attempting to fix the issue of being unable to play .MKV format video files // Attempting to fix the issue of being unable to play .MKV format video files
const getSourceType = (source: string) => { const getSourceType = (source: string) => {
@ -137,30 +141,29 @@ interface LanguageImports {
} }
const languageImports: LanguageImports = { const languageImports: LanguageImports = {
'he': () => import('video.js/dist/lang/he.json'), he: () => import("video.js/dist/lang/he.json"),
'hu': () => import('video.js/dist/lang/hu.json'), hu: () => import("video.js/dist/lang/hu.json"),
'ar': () => import('video.js/dist/lang/ar.json'), ar: () => import("video.js/dist/lang/ar.json"),
'de': () => import('video.js/dist/lang/de.json'), de: () => import("video.js/dist/lang/de.json"),
'el': () => import('video.js/dist/lang/el.json'), el: () => import("video.js/dist/lang/el.json"),
'en': () => import('video.js/dist/lang/en.json'), en: () => import("video.js/dist/lang/en.json"),
'es': () => import('video.js/dist/lang/es.json'), es: () => import("video.js/dist/lang/es.json"),
'fr': () => import('video.js/dist/lang/fr.json'), fr: () => import("video.js/dist/lang/fr.json"),
'it': () => import('video.js/dist/lang/it.json'), it: () => import("video.js/dist/lang/it.json"),
'ja': () => import('video.js/dist/lang/ja.json'), ja: () => import("video.js/dist/lang/ja.json"),
'ko': () => import('video.js/dist/lang/ko.json'), ko: () => import("video.js/dist/lang/ko.json"),
'nl-be': () => import('video.js/dist/lang/nl.json'), "nl-be": () => import("video.js/dist/lang/nl.json"),
'pl': () => import('video.js/dist/lang/pl.json'), pl: () => import("video.js/dist/lang/pl.json"),
'pt-br': () => import('video.js/dist/lang/pt-BR.json'), "pt-br": () => import("video.js/dist/lang/pt-BR.json"),
'pt': () => import('video.js/dist/lang/pt-PT.json'), pt: () => import("video.js/dist/lang/pt-PT.json"),
'ro': () => import('video.js/dist/lang/ro.json'), ro: () => import("video.js/dist/lang/ro.json"),
'ru': () => import('video.js/dist/lang/ru.json'), ru: () => import("video.js/dist/lang/ru.json"),
'sk': () => import('video.js/dist/lang/sk.json'), sk: () => import("video.js/dist/lang/sk.json"),
'tr': () => import('video.js/dist/lang/tr.json'), tr: () => import("video.js/dist/lang/tr.json"),
'uk': () => import('video.js/dist/lang/uk.json'), uk: () => import("video.js/dist/lang/uk.json"),
'zh-cn': () => import('video.js/dist/lang/zh-CN.json'), "zh-cn": () => import("video.js/dist/lang/zh-CN.json"),
'zh-tw': () => import('video.js/dist/lang/zh-TW.json'), "zh-tw": () => import("video.js/dist/lang/zh-TW.json"),
}; };
</script> </script>
<style scoped> <style scoped>
.video-max { .video-max {

View File

@ -119,11 +119,9 @@ export default {
</script> </script>
<style scoped> <style scoped>
.upload-info {
.upload-info{
min-width: 19ch; min-width: 19ch;
width:auto; width: auto;
text-align: left; text-align: left;
} }
</style> </style>

View File

@ -101,6 +101,6 @@ export function logout() {
if (noAuth) { if (noAuth) {
window.location.reload(); window.location.reload();
} else { } else {
router.push({path: "/login"}); router.push({ path: "/login" });
} }
} }

View File

@ -151,7 +151,6 @@ const fetchData = async () => {
fileStore.updateRequest(res); fileStore.updateRequest(res);
document.title = `${res.name} - ${t("files.files")} - ${name}`; document.title = `${res.name} - ${t("files.files")} - ${name}`;
} catch (err) { } catch (err) {
if (err instanceof Error) { if (err instanceof Error) {
error.value = err; error.value = err;