ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Projects Releases Wiki Activity

Format

Browse Source
This commit is contained in:
dragongoose 2023-11-04 19:52:55 -04:00
parent 961d3bfa67
commit 4dd94d4af1
No known key found for this signature in database
GPG Key ID: 01397EEC371CDAA5
20 changed files with 509 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/qualitySelector.ts
View File

@ -72,7 +72,7 @@ export const createQualitySelector = (player: any) => {
qualityLevels.on('addqualitylevel', () => {
formatedQualities = qualityLevels.levels_.map((quality: QualityLevel) => {
let qualityFramerate = ""
let qualityFramerate = ''
if (quality.frameRate > 30) {
qualityFramerate = quality.frameRate
@ -87,7 +87,7 @@ export const createQualitySelector = (player: any) => {
// remove audio only
const audioOnlyQuality = formatedQualities[formatedQualities.length - 1]
if (audioOnlyQuality.name === "undefinedp") {
if (audioOnlyQuality.name === 'undefinedp') {
formatedQualities.splice(formatedQualities.length - 1, 1)
}

21
src/components/AudioPlayer.vue
View File

@ -13,7 +13,7 @@ export default {
props: {
masterManifestUrl: {
type: String,
required: true,
required: true
}
},
emits: ['PlayerTimeUpdate'],
@ -22,14 +22,14 @@ export default {
const getAudioOnlyManifestFromUrl = async (masterManifestUrl: string) => {
const manifestRes = await fetch(masterManifestUrl)
if (!manifestRes.ok) return;
if (!manifestRes.ok) return
const manifest = await manifestRes.text()
// The last line of the manifest is the
// audio only manifest. This is a bit hacky
// but it'll work. If issues arise we can
// always implement an actual m3u8 parser
const tmp = manifest.split("\n")
const tmp = manifest.split('\n')
const audioOnlyManifest = tmp[tmp.length - 1]
return audioOnlyManifest
@ -44,19 +44,18 @@ export default {
// initializing the video player
// when the component is being mounted
mounted() {
const video = this.$refs.videoPlayer as HTMLVideoElement;
const video = this.$refs.videoPlayer as HTMLVideoElement
if (Hls.isSupported()) {
const hls = new Hls();
const hls = new Hls()
hls.loadSource(this.audioOnlyManifest || "");
hls.attachMedia(video);
hls.loadSource(this.audioOnlyManifest || '')
hls.attachMedia(video)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
if(getSetting("autoplay")) {
video.play();
if (getSetting('autoplay')) {
video.play()
}
});
})
}
}
}
</script>

7
src/components/CategoryPreview.vue
View File

@ -39,10 +39,9 @@ export default {
<ul class="h-8 overflow-hidden">
<li v-for="tag in category.tags" :key="tag" class="inline-flex">
<span
class="p-2.5 py-1.5 bg-surface0 rounded-md m-0.5 text-xs font-bold text-contrast"
>{{ tag }}</span
>
<span class="p-2.5 py-1.5 bg-surface0 rounded-md m-0.5 text-xs font-bold text-contrast">{{
tag
}}</span>
</li>
</ul>
</div>

2
src/components/FollowButton.vue
View File

@ -18,7 +18,7 @@ export default {
methods: {
followStreamer() {
const username = this.$props.username
const follows = localStorage.getItem('following') || "[]"
const follows = localStorage.getItem('following') || '[]'
let parsedFollows: string[] = JSON.parse(follows)

2
src/components/FooterView.vue
View File

@ -4,7 +4,7 @@ export default {
return {
version: `${import.meta.env.SAFETWITCH_TAG}-${import.meta.env.SAFETWITCH_COMMIT_HASH}`
}
},
}
}
</script>

14
src/components/NavbarView.vue
View File

@ -35,16 +35,10 @@ export default {
<search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
<div class="text-contrast hidden space-x-4 sm:block">
<a
href="https://codeberg.org/dragongoose/safetwitch"
target="_blank"
>{{ $t('nav.code') }}</a
>
<a href="https://codeberg.org/dragongoose/safetwitch" target="_blank">{{ $t('nav.code') }}</a>
<a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
<router-link to="/privacy">{{
$t('nav.privacy')
}}</router-link>
<router-link to="/settings">{{ $t("nav.settings") }}</router-link>
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
<router-link to="/settings">{{ $t('nav.settings') }}</router-link>
</div>
<div class="block sm:hidden">
@ -63,7 +57,7 @@ export default {
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
<a :href="'https://twitch.tv' + $route.fullPath">Twitch</a>
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
<router-link to="/settings">{{ $t("nav.settings") }}</router-link>
<router-link to="/settings">{{ $t('nav.settings') }}</router-link>
</ul>
</div>
</div>

12
src/components/StreamPreview.vue
View File

@ -24,9 +24,9 @@ export default {
login: streamData.streamer.name,
followers: 0,
isLive: true,
about: "",
about: '',
pfp: streamData.streamer.pfp,
banner: "",
banner: '',
isPartner: false,
colorHex: streamData.streamer.colorHex,
id: 0,
@ -34,13 +34,13 @@ export default {
title: streamData.title,
tags: streamData.tags,
startedAt: 0,
topic: "",
topic: '',
viewers: streamData.viewers,
preview: streamData.preview
}
}
} else {
data = await getEndpoint("api/users/" + props.name)
data = await getEndpoint('api/users/' + props.name)
}
const frontend_url = protocol + import.meta.env.SAFETWITCH_INSTANCE_DOMAIN
@ -68,7 +68,9 @@ export default {
<div class="inline-flex">
<img :src="data.pfp" class="rounded-full mr-2" />
<div class="w-full">
<p class="font-bold w-[18rem] md:w-[22.9rem] truncate" :title="data.stream.title">{{ data.stream.title }}</p>
<p class="font-bold w-[18rem] md:w-[22.9rem] truncate" :title="data.stream.title">
{{ data.stream.title }}
</p>
<div class="inline-flex w-full justify-between">
<p class="text-neutral">{{ data.username }}</p>
<p class="self-end float-right">

2
src/components/VideoPlayer.vue
View File

@ -37,7 +37,7 @@ export default {
createQualitySelector(this.player)
if (this.$route.query['t']) {
const timeQuery = this.$route.query['t'].toString() || ""
const timeQuery = this.$route.query['t'].toString() || ''
const time = getTimeFromQuery(timeQuery)
this.player.currentTime(time)
}

55
src/components/popups/ShareButtonModal.vue
View File

@ -1,19 +1,19 @@
<script lang="ts">
import { useRoute } from "vue-router";
import { ref } from "vue";
import { useRoute } from 'vue-router'
import { ref } from 'vue'
export default {
setup() {
const route = useRoute()
const instanceUrl = location.protocol + '//' + location.host;
const instanceUrl = location.protocol + '//' + location.host
let currentUrl = ref(instanceUrl)
return {
// remove any query from the path
path: route.fullPath.split("?")[0],
path: route.fullPath.split('?')[0],
usingTwitchUrl: ref(false),
usingTime: ref(false),
query: ref(""),
query: ref(''),
instanceUrl,
currentUrl
}
@ -44,25 +44,25 @@ export default {
},
toggleTwitchUrl() {
if (this.usingTwitchUrl) {
this.currentUrl = "https://twitch.tv"
this.currentUrl = 'https://twitch.tv'
} else {
this.currentUrl = this.instanceUrl
}
},
async copyUrl() {
try {
await navigator.clipboard.writeText(this.currentUrl + this.path + this.query);
console.log('Content copied to clipboard');
await navigator.clipboard.writeText(this.currentUrl + this.path + this.query)
console.log('Content copied to clipboard')
} catch (err) {
console.error('Failed to copy: ', err);
console.error('Failed to copy: ', err)
}
},
toggleTime() {
if (this.usingTime) {
const timestamp = this.formatSecondsToQuery(this.$props.time)
this.query = "?t=" + timestamp
this.query = '?t=' + timestamp
} else {
this.query = ""
this.query = ''
}
},
gotoUrl() {
@ -73,8 +73,12 @@ export default {
</script>
<template>
<div class="fixed top-0 bottom-0 left-0 right-0 flex w-full z-50 h-[100vh] bg-opacity-50 bg-black">
<div class="bg-crust my-auto h-min mx-auto w-[35rem] max-w-[95vw] p-5 rounded-md relative z-50 text-contrast">
<div
class="fixed top-0 bottom-0 left-0 right-0 flex w-full z-50 h-[100vh] bg-opacity-50 bg-black"
>
<div
class="bg-crust my-auto h-min mx-auto w-[35rem] max-w-[95vw] p-5 rounded-md relative z-50 text-contrast"
>
<div class="flex justify-between">
<h1 class="text-3xl font-bold">{{ $t('share.share') }}</h1>
<button @click="$emit('close')">
@ -90,18 +94,35 @@ export default {
<ul class="mt-1">
<li>
<label class="flex items-center">
<input :disabled="!useTime" class="align-middle w-4 h-4 mr-1 disabled:opacity-50" type="checkbox" @change="toggleTime()" v-model="usingTime" /> {{ $t('share.addTimestamp') }}
<input
:disabled="!useTime"
class="align-middle w-4 h-4 mr-1 disabled:opacity-50"
type="checkbox"
@change="toggleTime()"
v-model="usingTime"
/>
{{ $t('share.addTimestamp') }}
</label>
<label class="flex items-center">
<input class="align-middle w-4 h-4 mr-1" @change="toggleTwitchUrl()" v-model="usingTwitchUrl" type="checkbox" /> {{ $t('share.twitchUrl') }}
<input
class="align-middle w-4 h-4 mr-1"
@change="toggleTwitchUrl()"
v-model="usingTwitchUrl"
type="checkbox"
/>
{{ $t('share.twitchUrl') }}
</label>
</li>
</ul>
<div class="space-x-2 mt-1">
<button class="p-2 py-1.5 bg-surface0 rounded-md" @click="copyUrl()">{{ $t('share.copyLink') }}</button>
<button class="p-2 py-1.5 bg-surface0 rounded-md" @click="gotoUrl()" >{{ $t('share.goto') }}</button>
<button class="p-2 py-1.5 bg-surface0 rounded-md" @click="copyUrl()">
{{ $t('share.copyLink') }}
</button>
<button class="p-2 py-1.5 bg-surface0 rounded-md" @click="gotoUrl()">
{{ $t('share.goto') }}
</button>
</div>
</div>
</div>

15
src/components/user/AboutTab.vue
View File

@ -1,7 +1,7 @@
<script lang="ts">
import { getSetting } from '@/settingsManager'
import type { Social } from '@/types';
import type { PropType } from 'vue';
import type { Social } from '@/types'
import type { PropType } from 'vue'
export default {
props: {
@ -16,11 +16,11 @@ export default {
getSetting,
getIconName(iconType: string) {
console.log(iconType)
const icons = ["Twitter", "instagram", "discord", "youtube", "tiktok", "reddit"]
const icons = ['Twitter', 'instagram', 'discord', 'youtube', 'tiktok', 'reddit']
if (icons.includes(iconType)) {
return "bi-" + iconType
return 'bi-' + iconType
} else {
return "bi-link-45deg"
return 'bi-link-45deg'
}
}
}
@ -28,7 +28,10 @@ export default {
</script>
<template>
<div v-if="getSetting('streamerAboutSectionVisible')" class="bg-primary mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div
v-if="getSetting('streamerAboutSectionVisible')"
class="bg-primary mt-1 p-5 pt-3 rounded-lg w-full space-y-3"
>
<div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t('streamer.about') }}</span>
</div>

3
src/i18n.ts
View File

@ -14,7 +14,6 @@ import fr from '@/locales/fr.json'
import uk from '@/locales/uk.json'
import de from '@/locales/de.json'
export default createI18n({
legacy: false,
locale: import.meta.env.VUE_APP_I18N_LOCALE || 'en-US',
@ -34,6 +33,6 @@ export default createI18n({
'it-IT': it,
'fr-FR': fr,
'uk-UA': uk,
'de-DE': de,
'de-DE': de
}
})

4
src/mixins.ts
View File

@ -3,7 +3,6 @@ const https = import.meta.env.SAFETWITCH_HTTPS.slice() === 'true'
const protocol = https ? 'https://' : 'http://'
const rootBackendUrl = `${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/`
export function truncate(value: string, length: number) {
if (value.length > length) {
return value.substring(0, length) + '...'
@ -53,7 +52,7 @@ export async function getEndpoint(endpoint: string) {
*/
export function getTimeFromQuery(query: string) {
// H, M, S
const x = query.split(/[^0-9.]/g);
const x = query.split(/[^0-9.]/g)
const times = x.map(Number)
let time = 0
@ -62,4 +61,3 @@ export function getTimeFromQuery(query: string) {
time += times[2]
return time
}

91
src/settingsManager.ts
View File

@ -1,9 +1,39 @@
const locales = ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR', 'cs-CZ', 'pl-PL', 'it-IT', 'fr-FR', 'uk-UA', 'de-DE']
const languages = ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어', 'Česky', 'Polski', 'Italia', 'Français', 'Українська', 'Deutsch']
const locales = [
'en-US',
'es-ES',
'nl-NL',
'pt-PT',
'fa-IR',
'he-IL',
'ru-RU',
'ko-KR',
'cs-CZ',
'pl-PL',
'it-IT',
'fr-FR',
'uk-UA',
'de-DE'
]
const languages = [
'English',
'Español',
'Nederlands',
'Português',
'فارسی',
'עִבְרִית',
'Русский',
'한국어',
'Česky',
'Polski',
'Italia',
'Français',
'Українська',
'Deutsch'
]
export interface SettingsCheckbox {
name: string
selected: boolean,
selected: boolean
type: 'checkbox'
}
@ -35,7 +65,7 @@ export interface Settings {
export const setLanguage = (selectedLanguage: string, i18n: any) => {
// Locales and languages in arrays to match them
const locale = locales[languages.indexOf(selectedLanguage)]
localStorage.setItem("language", locale)
localStorage.setItem('language', locale)
i18n.locale = locale
}
@ -93,7 +123,7 @@ export function getDefaultSettings(): Settings {
* @param settings Settings of the Settings type
* @returns The synced settings and a boolean stating if the settings were modified
*/
export function syncUserSettings(settings: Settings): {settings: Settings, changed: boolean}{
export function syncUserSettings(settings: Settings): { settings: Settings; changed: boolean } {
const defaultSettings = getDefaultSettings()
let userSettings = settings
@ -101,14 +131,15 @@ export function syncUserSettings(settings: Settings): {settings: Settings, chang
// than 2.4.1
let oldMigration = false
if (userSettings.version === import.meta.env.SAFETWITCH_TAG) {
console.log('Settings up to date!')
return { settings: userSettings, changed: false }
} else {
console.log('Settings outdated... Migrating')
// converts v2.4.1 to 241
const settingsVersion = Number(userSettings.version.slice(1, defaultSettings.version.length).split(".").join(""))
const settingsVersion = Number(
userSettings.version.slice(1, defaultSettings.version.length).split('.').join('')
)
if (settingsVersion < 241) {
oldMigration = true
@ -164,7 +195,7 @@ export function getSetting(key: string): boolean | string {
* @default string light
*/
export function getTheme() {
return localStorage.getItem('theme') || "light"
return localStorage.getItem('theme') || 'light'
}
// every avaliable theme
@ -177,17 +208,17 @@ export const themeList = [
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
extend: {
colors: {
"primary": '#141515',
"secondary": '#1e1f1f',
"overlay0": '#282a2a',
"overlay1": '#323434',
"surface0": '#393B3B',
"surface1": '#3F4242',
"crust": '#0C0C0C',
"purple": '#D946EF',
"red": "#980C0C",
"neutral": "#bdbdbd",
"contrast": "white",
primary: '#141515',
secondary: '#1e1f1f',
overlay0: '#282a2a',
overlay1: '#323434',
surface0: '#393B3B',
surface1: '#3F4242',
crust: '#0C0C0C',
purple: '#D946EF',
red: '#980C0C',
neutral: '#bdbdbd',
contrast: 'white'
}
}
},
@ -199,17 +230,17 @@ export const themeList = [
// just as if you were to extend tailwind's theme like normal https://tailwindcss.com/docs/theme#extending-the-default-theme
extend: {
colors: {
"primary": '#ebeaea',
"secondary": '#e1e0e0',
"overlay0": '#d7d5d5',
"overlay1": '#cdcbcb',
"surface0": '#c6c4c4',
"surface1": '#c0bdbd',
"crust": '#fafafa',
"purple": '#D946EF',
"red": "#e81304",
"neutral": "gray",
"contrast": "black",
primary: '#ebeaea',
secondary: '#e1e0e0',
overlay0: '#d7d5d5',
overlay1: '#cdcbcb',
surface0: '#c6c4c4',
surface1: '#c0bdbd',
crust: '#fafafa',
purple: '#D946EF',
red: '#e81304',
neutral: 'gray',
contrast: 'black'
}
}
}

14
src/views/CategoryView.vue
View File

@ -98,10 +98,9 @@ export default {
<ul class="mb-5">
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
<span
class="p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm"
>{{ tag }}</span
>
<span class="p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm">{{
tag
}}</span>
</li>
</ul>
</div>
@ -125,10 +124,9 @@ export default {
<ul class="mb-5">
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
<span
class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm"
>{{ tag }}</span
>
<span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-overlay1 rounded-sm">{{
tag
}}</span>
</li>
</ul>
</div>

3
src/views/ClipView.vue
View File

@ -96,8 +96,7 @@ export default {
class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
>
<div class="w-full mx-auto rounded-lg mb-5">
<video-player :options="videoOptions">
</video-player>
<video-player :options="videoOptions"> </video-player>
</div>
<div class="w-full flex-wrap md:p-3">

6
src/views/HomepageView.vue
View File

@ -102,11 +102,7 @@ export default {
<h1 class="font-bold text-5xl">Following</h1>
<p class="text-xl">Streamers you follow</p>
<ul class="flex overflow-x-scroll space-x-2 flex-nowrap h-[22rem] items-center">
<li
v-for="streamer in following"
:key="streamer"
class="inline-block"
>
<li v-for="streamer in following" :key="streamer" class="inline-block">
<stream-preview-vue :name="streamer"></stream-preview-vue>
</li>
</ul>

57
src/views/SettingsView.vue
View File

@ -18,7 +18,7 @@ export default {
settings = syncResp.settings
}
let selectedTheme = localStorage.getItem('theme') || "light"
let selectedTheme = localStorage.getItem('theme') || 'light'
return {
settings,
@ -35,7 +35,7 @@ export default {
this.setTheme()
// Reload needed
location.href = "/"
location.href = '/'
},
setTheme() {
localStorage.setItem('theme', this.selectedTheme)
@ -44,15 +44,15 @@ export default {
if (this.selectedTheme == theme) {
return 'border-purple'
}
return "border-none"
return 'border-none'
},
download() {
var hiddenElement = document.createElement('a');
var hiddenElement = document.createElement('a')
hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings));
hiddenElement.target = '_blank';
hiddenElement.download = 'safetwitch_prefs.json';
hiddenElement.click();
hiddenElement.href = 'data:attachment/text,' + encodeURI(JSON.stringify(this.settings))
hiddenElement.target = '_blank'
hiddenElement.download = 'safetwitch_prefs.json'
hiddenElement.click()
},
async handleImport(event: any) {
const file = await event.target.files[0].text()
@ -68,14 +68,14 @@ export default {
this.settings = settings
this.save()
},
}
}
}
</script>
<template>
<div class="mx-auto w-[35rem] max-w-[95vw] p-5 py-3 bg-secondary rounded-md text-contrast">
<h1 class="font-bold text-3xl">{{ $t("nav.settings") }}</h1>
<h1 class="font-bold text-3xl">{{ $t('nav.settings') }}</h1>
<hr class="my-2" />
<ul class="w-full space-y-1">
<li v-for="setting in settings.settings" :key="setting.type">
@ -86,8 +86,12 @@ export default {
<div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
<label :for="setting.name">{{ $t(`settings.${setting.name}`) }}</label>
<select :name="setting.name" type="checkbox" v-model="setting.selected"
class="text-black rounded-md h-8 p-0 pr-8 pl-2">
<select
:name="setting.name"
type="checkbox"
v-model="setting.selected"
class="text-black rounded-md h-8 p-0 pr-8 pl-2"
>
<option v-for="option of setting.options" :key="option" :value="option">
{{ option }}
</option>
@ -96,25 +100,40 @@ export default {
</li>
</ul>
<h1 class="font-bold text-3xl mt-2">{{ $t("main.themes") }}</h1>
<h1 class="font-bold text-3xl mt-2">{{ $t('main.themes') }}</h1>
<hr class="my-2" />
<ul class="flex space-x-2">
<!--
Use theme colors for preview
-->
<li v-for="theme in themeList" :key="theme.name" class="hover:scale-110 border-2 rounded-md transition-transform"
:class="highlight(theme.name)">
<button @click="selectedTheme = theme.name" class="p-5 py-1.5 border-4 rounded-md"
:style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`">
<li
v-for="theme in themeList"
:key="theme.name"
class="hover:scale-110 border-2 rounded-md transition-transform"
:class="highlight(theme.name)"
>
<button
@click="selectedTheme = theme.name"
class="p-5 py-1.5 border-4 rounded-md"
:style="`border-color: ${theme.extend.colors.primary}; background:${theme.extend.colors.crust}; color:${theme.extend.colors.contrast};`"
>
<p>{{ theme.name }}</p>
</button>
</li>
</ul>
<div class="space-x-2 mt-3">
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">{{ $t('settings.saveButton') }}</button>
<button @click="save" class="bg-surface0 p-4 py-2 rounded-md">
{{ $t('settings.saveButton') }}
</button>
<button @click="download" class="bg-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput" class="bg-surface0 p-4 py-2 rounded-md">
<input
type="file"
@change="handleImport"
name="fileinput"
ref="fileinput"
class="bg-surface0 p-4 py-2 rounded-md"
/>
</div>
</div>
</template>

17
src/views/UserView.vue
View File

@ -12,7 +12,6 @@ import AudioPlayer from '@/components/AudioPlayer.vue'
import AboutTab from '@/components/user/AboutTab.vue'
import ShareModal from '@/components/popups/ShareButtonModal.vue'
import type { StreamerData } from '@/types'
import { truncate, abbreviate, getEndpoint } from '@/mixins'
import { chatVisible, getSetting } from '@/settingsManager'
@ -26,7 +25,7 @@ export default {
const status = ref<'ok' | 'error'>()
const rootBackendUrl = inject('rootBackendUrl')
const videoOptions = {
autoplay: getSetting("autoplay"),
autoplay: getSetting('autoplay'),
controls: true,
sources: [
{
@ -48,9 +47,9 @@ export default {
},
async mounted() {
// check if audio only
const audioOnly = getSetting("audioOnly")
const audioOnly = getSetting('audioOnly')
if (audioOnly) {
this.$router.push({ query: { "audio-only": "true" } })
this.$router.push({ query: { 'audio-only': 'true' } })
}
const username = this.$route.params.username
@ -87,7 +86,12 @@ export default {
</script>
<template>
<share-modal v-if="shareModalVisible" :time="0" :useTime="false" @close="toggleShareModal"></share-modal>
<share-modal
v-if="shareModalVisible"
:time="0"
:useTime="false"
@close="toggleShareModal"
></share-modal>
<loading-screen v-if="!data && status != 'error'"></loading-screen>
<error-message v-else-if="status == 'error'"></error-message>
@ -99,7 +103,8 @@ export default {
class="flex bg-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-contrast"
>
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
<video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions"> </video-player>
<video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions">
</video-player>
<audio-player v-else :masterManifestUrl="audioOptions"></audio-player>
</div>

9
src/views/VodView.vue
View File

@ -10,7 +10,6 @@ import LoadingScreen from '@/components/LoadingScreen.vue'
import AboutTab from '@/components/user/AboutTab.vue'
import ShareModal from '@/components/popups/ShareButtonModal.vue'
import type { Video } from '@/types'
import { truncate, abbreviate, getEndpoint } from '@/mixins'
import { chatVisible, getSetting } from '@/settingsManager'
@ -83,7 +82,12 @@ export default {
</script>
<template>
<share-modal v-if="shareModalVisible" :time="time" :useTime="true" @close="toggleShareModal"></share-modal>
<share-modal
v-if="shareModalVisible"
:time="time"
:useTime="true"
@close="toggleShareModal"
></share-modal>
<loading-screen v-if="!data && status != 'error'"></loading-screen>
<error-message v-else-if="status == 'error'"></error-message>
@ -127,7 +131,6 @@ export default {
</p>
</div>
<button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
<v-icon name="fa-share-alt"></v-icon>
</button>