mirror of
https://codeberg.org/SafeTwitch/safetwitch.git
synced 2024-12-22 05:12:57 -05:00
Format
This commit is contained in:
dragongoose
parent
961d3bfa67
commit
4dd94d4af1
20 changed files with 509 additions and 443 deletions
|
|
@ -15,9 +15,9 @@ const dev = import.meta.env.DEV
|
|||
<navbar-item></navbar-item>
|
||||
|
||||
<Suspense>
|
||||
<RouterView :key="$route.fullPath"/>
|
||||
<RouterView :key="$route.fullPath" />
|
||||
</Suspense>
|
||||
|
||||
<footer-item></footer-item>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -72,12 +72,12 @@ 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
|
||||
}
|
||||
|
||||
|
||||
return {
|
||||
name: quality.height?.toString() + 'p' + qualityFramerate,
|
||||
index: quality.id[0],
|
||||
|
|
@ -86,9 +86,9 @@ export const createQualitySelector = (player: any) => {
|
|||
})
|
||||
|
||||
// remove audio only
|
||||
const audioOnlyQuality = formatedQualities[formatedQualities.length-1]
|
||||
if (audioOnlyQuality.name === "undefinedp") {
|
||||
formatedQualities.splice(formatedQualities.length-1, 1)
|
||||
const audioOnlyQuality = formatedQualities[formatedQualities.length - 1]
|
||||
if (audioOnlyQuality.name === 'undefinedp') {
|
||||
formatedQualities.splice(formatedQualities.length - 1, 1)
|
||||
}
|
||||
|
||||
formattedLevels.push(formatedQualities)
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<audio ref="videoPlayer" class="w-full" controls></audio>
|
||||
</div>
|
||||
<div>
|
||||
<audio ref="videoPlayer" class="w-full" controls></audio>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
// Importing video-js
|
||||
|
|
@ -9,54 +9,53 @@ import Hls from 'hls.js'
|
|||
import { getSetting } from '@/settingsManager'
|
||||
|
||||
export default {
|
||||
name: 'VideoJsPlayer',
|
||||
props: {
|
||||
masterManifestUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
emits: ['PlayerTimeUpdate'],
|
||||
async setup(props) {
|
||||
let player: any
|
||||
|
||||
const getAudioOnlyManifestFromUrl = async (masterManifestUrl: string) => {
|
||||
const manifestRes = await fetch(masterManifestUrl)
|
||||
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 audioOnlyManifest = tmp[tmp.length - 1]
|
||||
|
||||
return audioOnlyManifest
|
||||
}
|
||||
|
||||
const audioOnlyManifest = await getAudioOnlyManifestFromUrl(props.masterManifestUrl)
|
||||
return {
|
||||
player,
|
||||
audioOnlyManifest
|
||||
}
|
||||
},
|
||||
// initializing the video player
|
||||
// when the component is being mounted
|
||||
mounted() {
|
||||
const video = this.$refs.videoPlayer as HTMLVideoElement;
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls();
|
||||
|
||||
hls.loadSource(this.audioOnlyManifest || "");
|
||||
hls.attachMedia(video);
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
if(getSetting("autoplay")) {
|
||||
video.play();
|
||||
}
|
||||
});
|
||||
}
|
||||
name: 'VideoJsPlayer',
|
||||
props: {
|
||||
masterManifestUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['PlayerTimeUpdate'],
|
||||
async setup(props) {
|
||||
let player: any
|
||||
|
||||
const getAudioOnlyManifestFromUrl = async (masterManifestUrl: string) => {
|
||||
const manifestRes = await fetch(masterManifestUrl)
|
||||
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 audioOnlyManifest = tmp[tmp.length - 1]
|
||||
|
||||
return audioOnlyManifest
|
||||
}
|
||||
|
||||
const audioOnlyManifest = await getAudioOnlyManifestFromUrl(props.masterManifestUrl)
|
||||
return {
|
||||
player,
|
||||
audioOnlyManifest
|
||||
}
|
||||
},
|
||||
// initializing the video player
|
||||
// when the component is being mounted
|
||||
mounted() {
|
||||
const video = this.$refs.videoPlayer as HTMLVideoElement
|
||||
if (Hls.isSupported()) {
|
||||
const hls = new Hls()
|
||||
|
||||
hls.loadSource(this.audioOnlyManifest || '')
|
||||
hls.attachMedia(video)
|
||||
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
||||
if (getSetting('autoplay')) {
|
||||
video.play()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@ export default {
|
|||
return {
|
||||
version: `${import.meta.env.SAFETWITCH_TAG}-${import.meta.env.SAFETWITCH_COMMIT_HASH}`
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="m-2 mt-5 flex justify-center">
|
||||
<p class="text-contrast font-bold">SafeTwitch {{ version}}</p>
|
||||
<p class="text-contrast font-bold">SafeTwitch {{ version }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default {
|
|||
},
|
||||
mounted() {
|
||||
const savedLocale = localStorage.getItem('language')
|
||||
if(savedLocale) {
|
||||
if (savedLocale) {
|
||||
this.$i18n.locale = savedLocale
|
||||
}
|
||||
}
|
||||
|
|
@ -33,18 +33,12 @@ export default {
|
|||
</div>
|
||||
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,108 +1,129 @@
|
|||
<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;
|
||||
let currentUrl = ref(instanceUrl)
|
||||
setup() {
|
||||
const route = useRoute()
|
||||
const instanceUrl = location.protocol + '//' + location.host
|
||||
let currentUrl = ref(instanceUrl)
|
||||
|
||||
return {
|
||||
// remove any query from the path
|
||||
path: route.fullPath.split("?")[0],
|
||||
usingTwitchUrl: ref(false),
|
||||
usingTime: ref(false),
|
||||
query: ref(""),
|
||||
instanceUrl,
|
||||
currentUrl
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
useTime: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatSecondsToQuery(sec: number) {
|
||||
const date = new Date(sec * 1000)
|
||||
const hour = date.getHours()
|
||||
const minutes = date.getMinutes()
|
||||
const seconds = date.getSeconds()
|
||||
|
||||
return `${hour}h${minutes}m${seconds}s`
|
||||
},
|
||||
toggleTwitchUrl() {
|
||||
if (this.usingTwitchUrl) {
|
||||
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');
|
||||
} catch (err) {
|
||||
console.error('Failed to copy: ', err);
|
||||
}
|
||||
},
|
||||
toggleTime() {
|
||||
if (this.usingTime) {
|
||||
const timestamp = this.formatSecondsToQuery(this.$props.time)
|
||||
this.query = "?t=" + timestamp
|
||||
} else {
|
||||
this.query = ""
|
||||
}
|
||||
},
|
||||
gotoUrl() {
|
||||
location.href = this.currentUrl + this.path + this.query
|
||||
}
|
||||
return {
|
||||
// remove any query from the path
|
||||
path: route.fullPath.split('?')[0],
|
||||
usingTwitchUrl: ref(false),
|
||||
usingTime: ref(false),
|
||||
query: ref(''),
|
||||
instanceUrl,
|
||||
currentUrl
|
||||
}
|
||||
},
|
||||
emits: ['close'],
|
||||
props: {
|
||||
time: {
|
||||
type: Number,
|
||||
default() {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
useTime: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatSecondsToQuery(sec: number) {
|
||||
const date = new Date(sec * 1000)
|
||||
const hour = date.getHours()
|
||||
const minutes = date.getMinutes()
|
||||
const seconds = date.getSeconds()
|
||||
|
||||
return `${hour}h${minutes}m${seconds}s`
|
||||
},
|
||||
toggleTwitchUrl() {
|
||||
if (this.usingTwitchUrl) {
|
||||
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')
|
||||
} catch (err) {
|
||||
console.error('Failed to copy: ', err)
|
||||
}
|
||||
},
|
||||
toggleTime() {
|
||||
if (this.usingTime) {
|
||||
const timestamp = this.formatSecondsToQuery(this.$props.time)
|
||||
this.query = '?t=' + timestamp
|
||||
} else {
|
||||
this.query = ''
|
||||
}
|
||||
},
|
||||
gotoUrl() {
|
||||
location.href = this.currentUrl + this.path + this.query
|
||||
}
|
||||
}
|
||||
}
|
||||
</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="flex justify-between">
|
||||
<h1 class="text-3xl font-bold">{{ $t('share.share') }}</h1>
|
||||
<button @click="$emit('close')">
|
||||
<v-icon name="io-close-sharp" scale="1.8"></v-icon>
|
||||
</button>
|
||||
</div>
|
||||
<hr class="my-2" />
|
||||
<div class="flex bg-surface0 p-3 rounded-md h-12 overflow-x-scroll whitespace-nowrap">
|
||||
<p class="" ref="urlPreview">
|
||||
{{ currentUrl + path + query }}
|
||||
</p>
|
||||
</div>
|
||||
<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') }}
|
||||
</label>
|
||||
<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')">
|
||||
<v-icon name="io-close-sharp" scale="1.8"></v-icon>
|
||||
</button>
|
||||
</div>
|
||||
<hr class="my-2" />
|
||||
<div class="flex bg-surface0 p-3 rounded-md h-12 overflow-x-scroll whitespace-nowrap">
|
||||
<p class="" ref="urlPreview">
|
||||
{{ currentUrl + path + query }}
|
||||
</p>
|
||||
</div>
|
||||
<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') }}
|
||||
</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') }}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<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') }}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,54 @@
|
|||
<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: {
|
||||
socials: {
|
||||
type: Object as PropType<Social[]>
|
||||
},
|
||||
about: {
|
||||
type: String
|
||||
}
|
||||
props: {
|
||||
socials: {
|
||||
type: Object as PropType<Social[]>
|
||||
},
|
||||
methods: {
|
||||
getSetting,
|
||||
getIconName(iconType: string) {
|
||||
console.log(iconType)
|
||||
const icons = ["Twitter", "instagram", "discord", "youtube", "tiktok", "reddit"]
|
||||
if (icons.includes(iconType)) {
|
||||
return "bi-" + iconType
|
||||
} else {
|
||||
return "bi-link-45deg"
|
||||
}
|
||||
}
|
||||
about: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getSetting,
|
||||
getIconName(iconType: string) {
|
||||
console.log(iconType)
|
||||
const icons = ['Twitter', 'instagram', 'discord', 'youtube', 'tiktok', 'reddit']
|
||||
if (icons.includes(iconType)) {
|
||||
return 'bi-' + iconType
|
||||
} else {
|
||||
return 'bi-link-45deg'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<p class="mb-5">{{ about || $t('streamer.noAbout') }}</p>
|
||||
|
||||
<hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
|
||||
|
||||
<ul v-if="socials" class="flex font-semibold text-md justify-start flex-wrap flex-row">
|
||||
<li v-for="link in socials" :key="link.url">
|
||||
<a :href="link.url" class="text-contrast hover:text-neutral mr-4 flex">
|
||||
<v-icon :name="getIconName(link.type)" class="w-6 h-6 mr-1"></v-icon>
|
||||
<span>{{ link.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-else> {{$t('streamer.noSocials')}} </p>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<p class="mb-5">{{ about || $t('streamer.noAbout') }}</p>
|
||||
|
||||
<hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
|
||||
|
||||
<ul v-if="socials" class="flex font-semibold text-md justify-start flex-wrap flex-row">
|
||||
<li v-for="link in socials" :key="link.url">
|
||||
<a :href="link.url" class="text-contrast hover:text-neutral mr-4 flex">
|
||||
<v-icon :name="getIconName(link.type)" class="w-6 h-6 mr-1"></v-icon>
|
||||
<span>{{ link.name }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p v-else>{{ $t('streamer.noSocials') }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,60 @@
|
|||
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,
|
||||
type: 'checkbox'
|
||||
name: string
|
||||
selected: boolean
|
||||
type: 'checkbox'
|
||||
}
|
||||
|
||||
export interface SettingsOptions {
|
||||
name: string
|
||||
options: string[]
|
||||
selected: string
|
||||
type: 'option'
|
||||
name: string
|
||||
options: string[]
|
||||
selected: string
|
||||
type: 'option'
|
||||
}
|
||||
|
||||
export interface Settings {
|
||||
version: string
|
||||
settings: {
|
||||
audioOnly: SettingsCheckbox
|
||||
defaultQuality: SettingsOptions
|
||||
language: SettingsOptions
|
||||
chatVisible: SettingsCheckbox
|
||||
streamTagsVisible: SettingsCheckbox
|
||||
streamerAboutSectionVisible: SettingsCheckbox
|
||||
autoplay: SettingsCheckbox
|
||||
}
|
||||
version: string
|
||||
settings: {
|
||||
audioOnly: SettingsCheckbox
|
||||
defaultQuality: SettingsOptions
|
||||
language: SettingsOptions
|
||||
chatVisible: SettingsCheckbox
|
||||
streamTagsVisible: SettingsCheckbox
|
||||
streamerAboutSectionVisible: SettingsCheckbox
|
||||
autoplay: SettingsCheckbox
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -33,10 +63,10 @@ export interface Settings {
|
|||
* @param i18n the i18n class in use
|
||||
*/
|
||||
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)
|
||||
i18n.locale = locale
|
||||
// Locales and languages in arrays to match them
|
||||
const locale = locales[languages.indexOf(selectedLanguage)]
|
||||
localStorage.setItem('language', locale)
|
||||
i18n.locale = locale
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -44,48 +74,48 @@ export const setLanguage = (selectedLanguage: string, i18n: any) => {
|
|||
* @returns Settings
|
||||
*/
|
||||
export function getDefaultSettings(): Settings {
|
||||
return {
|
||||
version: import.meta.env.SAFETWITCH_TAG,
|
||||
settings: {
|
||||
audioOnly: {
|
||||
name: 'audioOnly',
|
||||
selected: false,
|
||||
type: 'checkbox'
|
||||
},
|
||||
defaultQuality: {
|
||||
name: 'defaultQuality',
|
||||
options: ['160p', '360p', '480p', '720p', '1080p'],
|
||||
selected: '480p',
|
||||
type: 'option'
|
||||
},
|
||||
language: {
|
||||
name: 'language',
|
||||
options: languages,
|
||||
selected: 'English',
|
||||
type: 'option'
|
||||
},
|
||||
chatVisible: {
|
||||
name: 'chatVisible',
|
||||
selected: false,
|
||||
type: 'checkbox'
|
||||
},
|
||||
streamTagsVisible: {
|
||||
name: 'streamTagsVisible',
|
||||
selected: true,
|
||||
type: 'checkbox'
|
||||
},
|
||||
streamerAboutSectionVisible: {
|
||||
name: 'streamerAboutSectionVisible',
|
||||
selected: true,
|
||||
type: 'checkbox'
|
||||
},
|
||||
autoplay: {
|
||||
name: 'autoplay',
|
||||
selected: false,
|
||||
type: 'checkbox'
|
||||
}
|
||||
}
|
||||
return {
|
||||
version: import.meta.env.SAFETWITCH_TAG,
|
||||
settings: {
|
||||
audioOnly: {
|
||||
name: 'audioOnly',
|
||||
selected: false,
|
||||
type: 'checkbox'
|
||||
},
|
||||
defaultQuality: {
|
||||
name: 'defaultQuality',
|
||||
options: ['160p', '360p', '480p', '720p', '1080p'],
|
||||
selected: '480p',
|
||||
type: 'option'
|
||||
},
|
||||
language: {
|
||||
name: 'language',
|
||||
options: languages,
|
||||
selected: 'English',
|
||||
type: 'option'
|
||||
},
|
||||
chatVisible: {
|
||||
name: 'chatVisible',
|
||||
selected: false,
|
||||
type: 'checkbox'
|
||||
},
|
||||
streamTagsVisible: {
|
||||
name: 'streamTagsVisible',
|
||||
selected: true,
|
||||
type: 'checkbox'
|
||||
},
|
||||
streamerAboutSectionVisible: {
|
||||
name: 'streamerAboutSectionVisible',
|
||||
selected: true,
|
||||
type: 'checkbox'
|
||||
},
|
||||
autoplay: {
|
||||
name: 'autoplay',
|
||||
selected: false,
|
||||
type: 'checkbox'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -93,50 +123,51 @@ 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}{
|
||||
const defaultSettings = getDefaultSettings()
|
||||
let userSettings = settings
|
||||
export function syncUserSettings(settings: Settings): { settings: Settings; changed: boolean } {
|
||||
const defaultSettings = getDefaultSettings()
|
||||
let userSettings = settings
|
||||
|
||||
// converting settings storage from versions older
|
||||
// than 2.4.1
|
||||
let oldMigration = false
|
||||
// converting settings storage from versions older
|
||||
// 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(""))
|
||||
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('')
|
||||
)
|
||||
|
||||
if (settingsVersion < 241) {
|
||||
oldMigration = true
|
||||
}
|
||||
if (settingsVersion < 241) {
|
||||
oldMigration = true
|
||||
}
|
||||
}
|
||||
|
||||
if (oldMigration) {
|
||||
const oldSettings: any = userSettings
|
||||
delete oldSettings.version
|
||||
const migrated: Settings = {
|
||||
version: defaultSettings.version,
|
||||
settings: {
|
||||
...oldSettings
|
||||
}
|
||||
}
|
||||
|
||||
if (oldMigration) {
|
||||
const oldSettings: any = userSettings
|
||||
delete oldSettings.version
|
||||
const migrated: Settings = {
|
||||
version: defaultSettings.version,
|
||||
settings: {
|
||||
...oldSettings
|
||||
}
|
||||
}
|
||||
userSettings = migrated
|
||||
}
|
||||
console.log(userSettings)
|
||||
|
||||
userSettings = migrated
|
||||
}
|
||||
console.log(userSettings)
|
||||
const synced = { ...defaultSettings, ...userSettings }
|
||||
|
||||
const synced = { ...defaultSettings, ...userSettings }
|
||||
|
||||
// update avaliable languages
|
||||
synced.settings.language.options = defaultSettings.settings.language.options
|
||||
synced.version = import.meta.env.SAFETWITCH_TAG
|
||||
localStorage.setItem('settings', JSON.stringify(synced))
|
||||
console.log('Migrated!')
|
||||
return { settings: synced, changed: true }
|
||||
// update avaliable languages
|
||||
synced.settings.language.options = defaultSettings.settings.language.options
|
||||
synced.version = import.meta.env.SAFETWITCH_TAG
|
||||
localStorage.setItem('settings', JSON.stringify(synced))
|
||||
console.log('Migrated!')
|
||||
return { settings: synced, changed: true }
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -147,15 +178,15 @@ export function syncUserSettings(settings: Settings): {settings: Settings, chang
|
|||
* getSetting("audioOnly") // false
|
||||
*/
|
||||
export function getSetting(key: string): boolean | string {
|
||||
const storage = localStorage.getItem('settings')
|
||||
let parsed
|
||||
if (!storage) {
|
||||
parsed = getDefaultSettings()
|
||||
} else {
|
||||
parsed = JSON.parse(storage)
|
||||
}
|
||||
const storage = localStorage.getItem('settings')
|
||||
let parsed
|
||||
if (!storage) {
|
||||
parsed = getDefaultSettings()
|
||||
} else {
|
||||
parsed = JSON.parse(storage)
|
||||
}
|
||||
|
||||
return parsed[key].selected
|
||||
return parsed[key].selected
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -164,53 +195,53 @@ 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
|
||||
export const themeList = [
|
||||
{
|
||||
// name your theme anything that could be a valid css class name
|
||||
// remember what you named your theme because you will use it as a class to enable the theme
|
||||
name: 'dark',
|
||||
// put any overrides your theme has here
|
||||
// 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",
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
// name your theme anything that could be a valid css class name
|
||||
// remember what you named your theme because you will use it as a class to enable the theme
|
||||
name: 'light',
|
||||
// put any overrides your theme has here
|
||||
// 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",
|
||||
}
|
||||
}
|
||||
{
|
||||
// name your theme anything that could be a valid css class name
|
||||
// remember what you named your theme because you will use it as a class to enable the theme
|
||||
name: 'dark',
|
||||
// put any overrides your theme has here
|
||||
// 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'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
// name your theme anything that could be a valid css class name
|
||||
// remember what you named your theme because you will use it as a class to enable the theme
|
||||
name: 'light',
|
||||
// put any overrides your theme has here
|
||||
// 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'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
status.value = 'error'
|
||||
})
|
||||
|
||||
console.log(srcUrl)
|
||||
console.log(srcUrl)
|
||||
|
||||
const videoOptions = {
|
||||
autoplay: true,
|
||||
|
|
@ -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">
|
||||
|
|
@ -122,28 +121,28 @@ export default {
|
|||
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="pt-2 inline-flex">
|
||||
<follow-button :username="data.streamer.username"></follow-button>
|
||||
<p class="align-baseline font-bold ml-3">
|
||||
{{ abbreviate(data.streamer.followers) }} {{ $t('main.followers') }}
|
||||
</p>
|
||||
</div>
|
||||
<follow-button :username="data.streamer.username"></follow-button>
|
||||
<p class="align-baseline font-bold ml-3">
|
||||
{{ abbreviate(data.streamer.followers) }} {{ $t('main.followers') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="space-x-1">
|
||||
<a :href="srcUrl" download>
|
||||
<button class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<div class="space-x-1">
|
||||
<a :href="srcUrl" download>
|
||||
<button class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="md-download-round"></v-icon>
|
||||
</button>
|
||||
</a>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-share-alt"></v-icon>
|
||||
</button>
|
||||
</div>
|
||||
<button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-share-alt"></v-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ABOUT TAB -->
|
||||
<about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>
|
||||
<about-tab :socials="data.streamer.socials" :about="data.streamer.about"></about-tab>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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>
|
||||
<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 ">
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
@ -176,7 +181,7 @@ export default {
|
|||
</p>
|
||||
|
||||
<button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-share-alt"></v-icon>
|
||||
<v-icon name="fa-share-alt"></v-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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,10 +131,9 @@ 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>
|
||||
<button @click="toggleShareModal" class="px-2 py-1.5 rounded-lg bg-purple">
|
||||
<v-icon name="fa-share-alt"></v-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue