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

Lint/prettify

Browse Source
This commit is contained in:
dragongoose 2023-08-18 13:39:26 -04:00
parent f87b235abe
commit 06b77d686c
No known key found for this signature in database
GPG Key ID: 01397EEC371CDAA5
13 changed files with 177 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/messageParser.ts
View File

@ -60,7 +60,7 @@ export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessag
return { return {
type: 'CLEARCHAT', type: 'CLEARCHAT',
data: { data: {
username: message.message.replace(/(\r\n|\n|\r)/gm, ""), username: message.message.replace(/(\r\n|\n|\r)/gm, ''),
duration duration
} }
} }
@ -76,7 +76,7 @@ export function parseMessage(messageData: any, allBadges: Badge[]): ParsedMessag
} }
export function parseChatHistory(messages: StreamMessage[], badges: Badge[]) { export function parseChatHistory(messages: StreamMessage[], badges: Badge[]) {
let parsedMessages = [] const parsedMessages = []
for (let i = 0; i < messages.length; i++) { for (let i = 0; i < messages.length; i++) {
const message = messages[i] const message = messages[i]

8
src/assets/qualitySelector.ts
View File

@ -6,12 +6,6 @@ import type { QualityLevelList, QualityLevel } from 'videojs-contrib-quality-lev
import i18n from '@/i18n' import i18n from '@/i18n'
import { getSetting } from '@/mixins' import { getSetting } from '@/mixins'
const getQualityFromSettings = (qualityLevels) => {
const settings = localStorage.getItem("settings")
const parsed = JSON.parse(settings)
return parsed.defaultQuality.selected
}
export const createQualitySelector = (player: any) => { export const createQualitySelector = (player: any) => {
const qualityLevels: QualityLevelList = player.qualityLevels() const qualityLevels: QualityLevelList = player.qualityLevels()
const MenuButton = videojs.getComponent('MenuButton') const MenuButton = videojs.getComponent('MenuButton')
@ -53,7 +47,7 @@ export const createQualitySelector = (player: any) => {
} }
// set quality on startup // set quality on startup
const startingQuality = getSetting("defaultQuality") const startingQuality = getSetting('defaultQuality')
const id = formatedQualities.find((i) => i.name === startingQuality)?.id const id = formatedQualities.find((i) => i.name === startingQuality)?.id
setQuality(id) setQuality(id)

11
src/components/LanguageSwitcher.vue
View File

@ -18,7 +18,16 @@ export default {
setup() { setup() {
return { return {
langs: ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR'], langs: ['en-US', 'es-ES', 'nl-NL', 'pt-PT', 'fa-IR', 'he-IL', 'ru-RU', 'ko-KR'],
names: ['English', 'Español', 'Nederlands', 'Português', 'فارسی', 'עִבְרִית', 'Русский', '한국어'] names: [
'English',
'Español',
'Nederlands',
'Português',
'فارسی',
'עִבְרִית',
'Русский',
'한국어'
]
} }
}, },
mounted() { mounted() {

72
src/components/NavbarView.vue
View File

@ -14,44 +14,52 @@ export default {
}, },
methods: { methods: {
toggle() { toggle() {
this.open = !this.open this.open = !this.open
} }
} }
} }
</script> </script>
<template> <template>
<nav class="flex items-center justify-between flex-wrap p-4">
<div class="flex items-center flex-no-shrink text-white mr-6">
<router-link to="/">
<h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1>
</router-link>
</div>
<nav class="flex items-center justify-between flex-wrap p-4"> <search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar>
<div class="flex items-center flex-no-shrink text-white mr-6">
<router-link to="/"> <div class="text-white hidden sm:block">
<h1 class="font-bold text-2xl">Safe<color class="text-purple-500">Twitch</color></h1> <a
</router-link> href="https://codeberg.org/dragongoose/safetwitch"
class="mt-4 mr-4 sm:inline-block sm:mt-0"
>{{ $t('nav.code') }}</a
>
<router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{
$t('nav.privacy')
}}</router-link>
<language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
</div>
<div class="block sm:hidden">
<button @click="toggle" class="flex items-center px-3 py-2">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div :class="open ? 'block' : 'hidden'" class="w-full flex-grow">
<div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
<search-bar></search-bar>
<ul class="inline-flex space-x-3 md:space-x-6 font-medium">
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
<language-switcher></language-switcher>
</ul>
</div> </div>
</div>
<search-bar class="mt-4 mr-4 hidden sm:inline-block sm:mt-0"></search-bar> </nav>
<div class="text-white hidden sm:block">
<a href="https://codeberg.org/dragongoose/safetwitch" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.code') }}</a>
<router-link to="/privacy" class="mt-4 mr-4 sm:inline-block sm:mt-0">{{ $t('nav.privacy') }}</router-link>
<language-switcher class="mt-4 sm:inline-block sm:mt-0"></language-switcher>
</div>
<div class="block sm:hidden">
<button @click="toggle" class="flex items-center px-3 py-2">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
</button>
</div>
<div :class="open ? 'block': 'hidden'" class="w-full flex-grow">
<div class="p-4 flex flex-col items-center space-y-5 bg-ctp-base text-white">
<search-bar></search-bar>
<ul class="inline-flex space-x-3 md:space-x-6 font-medium">
<a href="https://codeberg.org/dragongoose/safetwitch">{{ $t('nav.code') }}</a>
<router-link to="/privacy">{{ $t('nav.privacy') }}</router-link>
<language-switcher></language-switcher>
</ul>
</div>
</div>
</nav>
</template> </template>

4
src/components/user/VideoTab.vue
View File

@ -5,10 +5,10 @@
<template> <template>
<div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3"> <div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div class="inline-flex w-full"> <div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t("streamer.videos") }}</span> <span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span>
</div> </div>
<h1 v-if="!shelves && status === 'error'">{{ $t("streamer.videoerror") }}</h1> <h1 v-if="!shelves && status === 'error'">{{ $t('streamer.videoerror') }}</h1>
<div v-else-if="shelves" class="mb-5"> <div v-else-if="shelves" class="mb-5">
<div class="space-y-5"> <div class="space-y-5">

30
src/mixins.ts
View File

@ -43,22 +43,22 @@ export async function getEndpoint(endpoint: string) {
export function getDefaultSettings() { export function getDefaultSettings() {
return { return {
"audioOnly": { audioOnly: {
"name": "Audio Only", name: 'Audio Only',
"selected": false, selected: false,
"type": "checkbox" type: 'checkbox'
}, },
"defaultQuality": { defaultQuality: {
"name": "Default Quality", name: 'Default Quality',
"options": ["160p", "360p", "480p", "720p", "1080p"], options: ['160p', '360p', '480p', '720p', '1080p'],
"selected": "480p", selected: '480p',
"type": "option" type: 'option'
},
"chatVisible": {
"name": "Hide Chat",
"selected": false,
"type": "checkbox"
}, },
chatVisible: {
name: 'Hide Chat',
selected: false,
type: 'checkbox'
}
} }
} }
@ -75,7 +75,7 @@ export function getSetting(key: string): boolean | string {
} }
export function chatVisible() { export function chatVisible() {
const p = getSetting("chatVisible") const p = getSetting('chatVisible')
// Flip becuase on the setting page it's // Flip becuase on the setting page it's
// displayed as "Hide Chat", but the value // displayed as "Hide Chat", but the value
// is chatVisible // is chatVisible

12
src/types/Chat.ts
View File

@ -18,13 +18,13 @@ export interface Metadata {
} }
export interface StreamMessageBadge { export interface StreamMessageBadge {
version: string version: string
setId: string setId: string
} }
export interface StreamMessage { export interface StreamMessage {
message: string message: string
username: string username: string
color: string color: string
badges: StreamMessageBadge[] badges: StreamMessageBadge[]
} }

2
src/types/VOD.ts
View File

@ -15,7 +15,7 @@ export interface MinifiedStreamer {
} }
export interface Video { export interface Video {
type: "vod" | "clip" type: 'vod' | 'clip'
preview: string preview: string
game: MinifiedCategory game: MinifiedCategory
duration: number duration: number

46
src/views/CategoryView.vue
View File

@ -35,34 +35,34 @@ export default {
}, },
methods: { methods: {
async getMoreStreams() { async getMoreStreams() {
let bottomOfWindow = let bottomOfWindow =
document.documentElement.scrollTop + window.innerHeight === document.documentElement.scrollTop + window.innerHeight ===
document.documentElement.offsetHeight document.documentElement.offsetHeight
const streams = this.data!.streams const streams = this.data!.streams
if (bottomOfWindow && streams) { if (bottomOfWindow && streams) {
// get cursor of the last stream rendered // get cursor of the last stream rendered
const cursor = streams[streams.length - 1].cursor const cursor = streams[streams.length - 1].cursor
if (!cursor) return if (!cursor) return
// get rest of streams from api // get rest of streams from api
const resData: CategoryData = await getEndpoint( const resData: CategoryData = await getEndpoint(
`api/discover/${this.$route.params.game}?cursor=${cursor}` `api/discover/${this.$route.params.game}?cursor=${cursor}`
).catch((err) => { ).catch((err) => {
throw err throw err
}) })
let lastStreamCursor = this.data!.streams[this.data!.streams.length-1].cursor let lastStreamCursor = this.data!.streams[this.data!.streams.length - 1].cursor
let newLastStreamCursor = resData.streams[resData.streams.length-1].cursor let newLastStreamCursor = resData.streams[resData.streams.length - 1].cursor
if (lastStreamCursor === newLastStreamCursor) { if (lastStreamCursor === newLastStreamCursor) {
// Add "no more streams!" screen later // Add "no more streams!" screen later
console.log("no more streams!") console.log('no more streams!')
} else { } else {
for (let stream of resData.streams) { for (let stream of resData.streams) {
this.data!.streams.push(stream) this.data!.streams.push(stream)
}
} }
} }
}
}, },
abbreviate abbreviate
}, },

26
src/views/HomepageView.vue
View File

@ -25,7 +25,10 @@ export default {
methods: { methods: {
filterSearches(toFilter: string) { filterSearches(toFilter: string) {
const categories = this.$refs.categoryItem const categories = this.$refs.categoryItem
const wantedTags: string[] = toFilter.toLowerCase().split(',').filter((v) => v.toLowerCase()) const wantedTags: string[] = toFilter
.toLowerCase()
.split(',')
.filter((v) => v.toLowerCase())
for (let category of categories as any) { for (let category of categories as any) {
let tagElements = category.getElementsByTagName('span') let tagElements = category.getElementsByTagName('span')
@ -49,18 +52,18 @@ export default {
} }
}, },
async getNextCategory() { async getNextCategory() {
let bottomOfWindow = let bottomOfWindow =
document.documentElement.scrollTop + window.innerHeight === document.documentElement.scrollTop + window.innerHeight ===
document.documentElement.offsetHeight document.documentElement.offsetHeight
if (bottomOfWindow && this.data) { if (bottomOfWindow && this.data) {
const cursor = this.data[this.data.length - 1].cursor const cursor = this.data[this.data.length - 1].cursor
if (!cursor) return if (!cursor) return
const res = await getEndpoint('api/discover?cursor=' + cursor) const res = await getEndpoint('api/discover?cursor=' + cursor)
for (let category of res) { for (let category of res) {
this.data.push(category) this.data.push(category)
}
} }
}
} }
}, },
async mounted() { async mounted() {
@ -142,6 +145,5 @@ export default {
<category-preview :category-data="category"></category-preview> <category-preview :category-data="category"></category-preview>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>

93
src/views/SettingsView.vue
View File

@ -2,25 +2,25 @@
import { getDefaultSettings } from '@/mixins' import { getDefaultSettings } from '@/mixins'
export default { export default {
setup() { setup() {
let settings let settings
let storedSettings = localStorage.getItem("settings") let storedSettings = localStorage.getItem('settings')
if (storedSettings === null) { if (storedSettings === null) {
settings = getDefaultSettings() settings = getDefaultSettings()
} else { } else {
settings = JSON.parse(storedSettings) settings = JSON.parse(storedSettings)
} }
return { return {
settings settings
} }
}, },
methods: { methods: {
save() { save() {
const settings = JSON.stringify(this.settings) const settings = JSON.stringify(this.settings)
localStorage.setItem('settings', settings) localStorage.setItem('settings', settings)
}, }
// download() { // download() {
// var hiddenElement = document.createElement('a'); // var hiddenElement = document.createElement('a');
@ -40,37 +40,42 @@ export default {
// this.settings = file // this.settings = file
// this.save() // this.save()
// }, // },
} }
} }
</script> </script>
<template> <template>
<div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white"> <div class="mx-auto w-[35rem] p-5 py-3 bg-ctp-crust rounded-md text-white">
<h1 class="font-bold text-3xl">Settings</h1> <h1 class="font-bold text-3xl">Settings</h1>
<hr class="my-2"> <hr class="my-2" />
<ul class="w-full space-y-1"> <ul class="w-full space-y-1">
<li v-for="setting in settings"> <li v-for="setting in settings" :key="setting.type">
<div v-if="setting.type == 'checkbox'" class="justify-between items-center flex"> <div v-if="setting.type == 'checkbox'" class="justify-between items-center flex">
<label :for="setting.name">{{ setting.name }}</label> <label :for="setting.name">{{ setting.name }}</label>
<input :name="setting.name" type="checkbox" v-model="setting.selected"> <input :name="setting.name" type="checkbox" v-model="setting.selected" />
</div> </div>
<div v-else-if="setting.type == 'option'" class="justify-between items-center flex"> <div v-else-if="setting.type == 'option'" class="justify-between items-center flex">
<label :for="setting.name">{{ setting.name }}</label> <label :for="setting.name">{{ setting.name }}</label>
<select :name="setting.name" type="checkbox" v-model="setting.selected" <select
class="text-black rounded-md h-8 p-0 pr-8 pl-2"> :name="setting.name"
<option v-for="option of setting.options" :value="option"> type="checkbox"
{{ option }} v-model="setting.selected"
</option> class="text-black rounded-md h-8 p-0 pr-8 pl-2"
</select> >
</div> <option v-for="option of setting.options" :key="option" :value="option">
</li> {{ option }}
</ul> </option>
</select>
</div>
</li>
</ul>
<div class="space-x-2 mt-3"> <div class="space-x-2 mt-3">
<button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button> <button @click="save" class="bg-ctp-surface0 p-4 py-2 rounded-md">Save</button>
<!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button> <!-- <button @click="download" class="bg-ctp-surface0 p-4 py-2 rounded-md">Export</button>
<input type="file" @change="handleImport" name="fileinput" ref="fileinput" <input type="file" @change="handleImport" name="fileinput" ref="fileinput"
class="bg-ctp-surface0 p-4 py-2 rounded-md"> --> class="bg-ctp-surface0 p-4 py-2 rounded-md"> -->
</div> </div>
</div></template> </div>
</template>

7
src/views/UserView.vue
View File

@ -168,6 +168,11 @@ export default {
</div> </div>
</div> </div>
<twitch-chat v-if="chatVisible()" :isLive="true" :channelName="data.login" class="h-2/3"></twitch-chat> <twitch-chat
v-if="chatVisible()"
:isLive="true"
:channelName="data.login"
class="h-2/3"
></twitch-chat>
</div> </div>
</template> </template>

7
src/views/VodView.vue
View File

@ -137,6 +137,11 @@ export default {
</div> </div>
</div> </div>
<twitch-chat v-if="chatVisible()" :isVod="true" :channelName="data.streamer.login" ref="chat"></twitch-chat> <twitch-chat
v-if="chatVisible()"
:isVod="true"
:channelName="data.streamer.login"
ref="chat"
></twitch-chat>
</div> </div>
</template> </template>