Infrastructure/safetwitch
0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2025-01-21 20:02:30 -05:00
Code Issues Activity

Format and eslint

Browse source
This commit is contained in:
dragongoose 2023-04-10 00:19:39 -04:00
parent d27ef3560c
commit a8ae6be436
No known key found for this signature in database
GPG key ID: 50DB99B921579009
11 changed files with 128 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/assets/badges.ts
View file

@ -1,30 +1,30 @@
import type { Badge, ParsedMessage } from './types';
import type { Badge, ParsedMessage } from './types'
export function getBadges(badges: Badge[], badgesToFind: { setId: string; version: string; }[]) {
const foundBadges = [];
if(!badges) return
export function getBadges(badges: Badge[], badgesToFind: { setId: string; version: string }[]) {
const foundBadges = []
if (!badges) return
for (let badgeToFind of badgesToFind) {
for (const badgeToFind of badgesToFind) {
const badge = badges
.filter((badge) => badge.setId === badgeToFind.setId)
.find((badge) => badge.version === badgeToFind.version);
.find((badge) => badge.version === badgeToFind.version)
if (badge) {
foundBadges.push(badge);
foundBadges.push(badge)
}
}
return foundBadges;
return foundBadges
}
export const getBadgesFromMessage = (message: ParsedMessage, allBadges: Badge[]) => {
let badgesString = message.data.tags.badges;
if (!badgesString) return;
let badges = badgesString.split(',');
let formatedBadges = badges.map((badgeWithVersion: string) => {
const [setId, version] = badgeWithVersion.split('/');
return { setId, version };
});
return getBadges(allBadges, formatedBadges);
}
const badgesString = message.data.tags.badges
if (!badgesString) return
const badges = badgesString.split(',')
const formatedBadges = badges.map((badgeWithVersion: string) => {
const [setId, version] = badgeWithVersion.split('/')
return { setId, version }
})
return getBadges(allBadges, formatedBadges)
}

72
src/assets/messageParser.ts
View file

@ -1,48 +1,46 @@
import type { Badge, ParsedMessage } from "./types";
import type { Badge, ParsedMessage } from './types'
import { getBadgesFromMessage } from './badges'
export function parseMessage(messageData: string, allBadges: Badge[]): ParsedMessage {
const message = JSON.parse(messageData);
switch (message.type) {
case "PRIVMSG": {
const tags = message.tags
const username = message.username
const data: ParsedMessage = {
type: "PRIVMSG",
data: { message: message.message, username, tags },
};
const message = JSON.parse(messageData)
const badges = getBadgesFromMessage(data, allBadges);
data.data.badges = badges
switch (message.type) {
case 'PRIVMSG': {
const tags = message.tags
const username = message.username
const data: ParsedMessage = {
type: 'PRIVMSG',
data: { message: message.message, username, tags }
}
return data
const badges = getBadgesFromMessage(data, allBadges)
data.data.badges = badges
return data
}
case 'USERNOTICE': {
const username = message.tags.login
const resub = message.tags['msg-id'] === 'resub'
const months = parseInt(message.tags['msg-param-cumulative-months'])
return {
type: 'USERNOTICE',
data: { username, resub, months }
}
case "USERNOTICE": {
const username = message.tags.login;
const resub = message.tags["msg-id"] === "resub";
const months = parseInt(message.tags["msg-param-cumulative-months"]);
return {
type: "USERNOTICE",
data: { username, resub, months },
};
}
case "CLEARMSG": {
return {
type: "CLEARMSG",
data: {
username: message.tags['@login'],
}
}
case 'CLEARMSG': {
return {
type: 'CLEARMSG',
data: {
username: message.tags['@login']
}
}
// Add more cases for other message types here
default: {
return {
type: "UNKNOWN",
data: { message },
};
}
// Add more cases for other message types here
default: {
return {
type: 'UNKNOWN',
data: { message }
}
}
}
}

27
src/assets/qualitySelector.ts
View file

@ -6,14 +6,14 @@ import type { QualityLevelList, QualityLevel } from 'videojs-contrib-quality-lev
export const createQualitySelector = (player: any) => {
const qualityLevels: QualityLevelList = player.qualityLevels()
const MenuButton = videojs.getComponent('MenuButton');
const MenuItem = videojs.getComponent('MenuItem');
let formatedQualities: {name: string, index: number, id:string}[];
const MenuButton = videojs.getComponent('MenuButton')
const MenuItem = videojs.getComponent('MenuItem')
let formatedQualities: { name: string; index: number; id: string }[]
const setQuality = (id: string) => {
const found = formatedQualities.find(i => i.id === id)
for(let quality of qualityLevels.levels_) {
if(quality.id !== id) {
const found = formatedQualities.find((i) => i.id === id)
for (const quality of qualityLevels.levels_) {
if (quality.id !== id) {
quality.enabled = false
} else {
quality.enabled = true
@ -21,7 +21,7 @@ export const createQualitySelector = (player: any) => {
}
qualityLevels.selectedIndex_ = found?.index
qualityLevels.trigger({ type: 'change', selectedIndex: found?.index})
qualityLevels.trigger({ type: 'change', selectedIndex: found?.index })
}
class CustomMenuButton extends MenuButton {
@ -30,13 +30,13 @@ export const createQualitySelector = (player: any) => {
createItems() {
const player = this.player()
return this.options_.items.map((item : {name: string}) => {
return this.options_.items.map((item: { name: string }) => {
const qualitySelectorButton = new MenuItem(player, { label: item.name })
qualitySelectorButton.handleClick = (data) => {
const qualityClicked = data.currentTarget.innerText
const id = formatedQualities.find(i => i.name === qualityClicked)?.id
const id = formatedQualities.find((i) => i.name === qualityClicked)?.id
if(id) {
if (id) {
setQuality(id)
}
}
@ -45,7 +45,7 @@ export const createQualitySelector = (player: any) => {
})
}
}
videojs.registerComponent('CustomMenuButton', CustomMenuButton);
videojs.registerComponent('CustomMenuButton', CustomMenuButton)
qualityLevels.on('addqualitylevel', () => {
formatedQualities = qualityLevels.levels_.map((quality: QualityLevel) => {
@ -56,14 +56,13 @@ export const createQualitySelector = (player: any) => {
}
})
player.controlBar.addChild('CustomMenuButton', {
title: 'Qualities',
items: formatedQualities
});
})
})
qualityLevels.on('change', function () {
const qualityLabel = qualityLevels[qualityLevels.selectedIndex].height?.toString() + 'p'
// TODO: Change label off button
})
}

12
src/assets/types/Badge.ts
View file

@ -1,7 +1,7 @@
export interface Badge {
id: string,
title: string,
setId: string,
version: string,
images: { [k:string]: string }
}
id: string
title: string
setId: string
version: string
images: { [k: string]: string }
}

7
src/assets/types/ParsedMessage.ts
View file

@ -1,5 +1,4 @@
export interface ParsedMessage {
type: string;
data: { [k: string]: any };
};
type: string
data: { [k: string]: any }
}

2
src/assets/types/index.ts
View file

@ -1,2 +1,2 @@
export * from './Badge'
export * from './ParsedMessage'
export * from './ParsedMessage'

12
src/components/LoadingScreen.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="flex mx-auto justify-center bg-ctp-crust rounded-lg w-2/3 p-2 text-white">
<div class="flex space-x-3">
<h1 class="text-4xl font-bold">Searching...</h1>
<v-icon name="fa-circle-notch" class="animate-spin w-10 h-10"></v-icon>
</div>
<div class="flex mx-auto justify-center bg-ctp-crust rounded-lg w-2/3 p-2 text-white">
<div class="flex space-x-3">
<h1 class="text-4xl font-bold">Searching...</h1>
<v-icon name="fa-circle-notch" class="animate-spin w-10 h-10"></v-icon>
</div>
</template>
</div>
</template>

30
src/components/StreamPreview.vue
View file

@ -29,7 +29,7 @@ export default {
)
const data = await streamDataFetch.json()
if(data.stream) {
if (data.stream) {
data.stream.streamer = { name: props.name, pfp: data.pfp }
streamData = data.stream
}
@ -60,25 +60,25 @@ export default {
<template>
<div v-if="streamData">
<div class="bg-ctp-crust rounded-lg w-[27rem]">
<RouterLink :to="'/' + streamData.streamer.name">
<img :src="streamData.preview" class="rounded-lg rounded-b-none" />
</RouterLink>
<div class="text-white p-2 inline-flex space-x-2 w-full h-16">
<div class="inline-flex">
<RouterLink :to="'/' + streamData.streamer.name">
<img :src="streamData.preview" class="rounded-lg rounded-b-none" />
</RouterLink>
<div class="text-white p-2 inline-flex space-x-2 w-full h-16">
<div class="inline-flex">
<img :src="streamData.streamer.pfp" class="rounded-full mr-2" />
<div class="w-full">
<p class="font-bold w-[22.9rem] truncate">{{ streamData.title }}</p>
<div class="inline-flex w-full justify-between">
<p class="text-gray-300">{{ streamData.streamer.name }}</p>
<p class="self-end float-right">
<v-icon name="io-person"></v-icon> {{ abbreviate(streamData.viewers) }}
</p>
<div class="inline-flex">
<img :src="streamData.streamer.pfp" class="rounded-full mr-2" />
<div class="w-full">
<p class="font-bold w-[22.9rem] truncate">{{ streamData.title }}</p>
<div class="inline-flex w-full justify-between">
<p class="text-gray-300">{{ streamData.streamer.name }}</p>
<p class="self-end float-right">
<v-icon name="io-person"></v-icon> {{ abbreviate(streamData.viewers) }}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

18
src/views/CategoryView.vue
View file

@ -20,15 +20,17 @@ export default {
const game: string = this.$route.params.game.toString()
try {
const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`)
if (!res.ok) {
return this.data = { status: 'error' }
}
this.data = await res.json()
} catch (err) {
this.data = { status: 'error' }
console.error(err)
const res = await fetch(
`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
)
if (!res.ok) {
return (this.data = { status: 'error' })
}
this.data = await res.json()
} catch (err) {
this.data = { status: 'error' }
console.error(err)
}
},
methods: {
abbreviate(text: number) {

13
src/views/HomepageView.vue
View file

@ -7,10 +7,9 @@ import LoadingScreen from '@/components/LoadingScreen.vue'
export default {
async setup() {
const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
let data: Ref<any | undefined> = ref()
let frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
return {
data,
@ -30,7 +29,7 @@ export default {
},
filterSearches(toFilter: string) {
const categories: HTMLCollectionOf<Element> = this.$refs.categoryItem as HTMLCollectionOf<Element>
const categories = this.$refs.categoryItem
const wantedTags: string[] = toFilter.split(',').filter((v) => v.toLowerCase())
for (let category of categories as any) {
@ -100,7 +99,6 @@ export default {
console.error(error)
this.data = { status: 'error' }
}
},
components: {
StreamPreviewVue,
@ -111,7 +109,6 @@ export default {
</script>
<template>
<loading-screen v-if="!data"></loading-screen>
<error-message v-else-if="data.status === 'error'"></error-message>
@ -120,7 +117,11 @@ export default {
<h1 class="font-bold text-5xl">Following</h1>
<p class="text-xl">Streamers you follow</p>
<ul class="flex overflow-x-scroll flex-nowrap h-80 space-x-1">
<li v-for="streamer in following" :key="streamer" class="inline-block hover:scale-105 transition-transform">
<li
v-for="streamer in following"
:key="streamer"
class="inline-block hover:scale-105 transition-transform"
>
<stream-preview-vue :name="streamer"></stream-preview-vue>
</li>
</ul>

26
src/views/UserView.vue
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { ref, onMounted } from 'vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import VideoPlayer from '@/components/VideoPlayer.vue'
import TwitchChat from '@/components/TwitchChat.vue'
@ -12,16 +12,18 @@ export default {
const route = useRoute()
const username = route.params.username
const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
const getUser = async () => {
try {
const res = await fetch(`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`)
const res = await fetch(
`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/users/${username}`
)
const data = await res.json()
return data
} catch (error) {
console.error(error)
return {
status: 'error',
status: 'error'
}
}
}
@ -32,7 +34,9 @@ export default {
controls: true,
sources: [
{
src: `${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/proxy/stream/${username}/hls.m3u8`,
src: `${protocol}${
import.meta.env.VITE_BACKEND_DOMAIN
}/proxy/stream/${username}/hls.m3u8`,
type: 'application/vnd.apple.mpegurl'
}
],
@ -46,11 +50,11 @@ export default {
}
},
components: {
VideoPlayer,
TwitchChat,
ErrorMessage,
FollowButton,
LoadingScreen
VideoPlayer,
TwitchChat,
ErrorMessage,
FollowButton,
LoadingScreen
},
async mounted() {
const fetchedUser = await this.getUser()
@ -68,9 +72,7 @@ export default {
}
</script>
<template>
<loading-screen v-if="!data"></loading-screen>
<error-message v-else-if="data.status === 'error'"></error-message>