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

Format files

Browse Source
This commit is contained in:
dragongoose 2023-03-29 10:26:55 -04:00
parent ea4e649959
commit 143e81276b
3 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/TwitchChat.vue
View File

@ -15,7 +15,13 @@ export default {
}, },
setup(props) { setup(props) {
let messages: Ref< let messages: Ref<
{ username: string; channel: string; message: string; messageType: string, tags: Record<string,string> }[] {
username: string
channel: string
message: string
messageType: string
tags: Record<string, string>
}[]
> = ref([]) > = ref([])
let ws = new WebSocket('ws://localhost:7000') let ws = new WebSocket('ws://localhost:7000')
@ -61,7 +67,10 @@ export default {
</script> </script>
<template> <template>
<div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col"> <div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-[15.625rem] flex flex-col">
<ul class="overflow-y-scroll overflow-x-hidden whitespace-pre-wrap h-[46.875rem]" ref="chatList"> <ul
class="overflow-y-scroll overflow-x-hidden whitespace-pre-wrap h-[46.875rem]"
ref="chatList"
>
<li> <li>
<p ref="initConnectingStatus" class="text-gray-500 text-sm italic"> <p ref="initConnectingStatus" class="text-gray-500 text-sm italic">
Connecting to {{ channelName }}. Connecting to {{ channelName }}.
@ -70,7 +79,10 @@ export default {
<li v-for="message in getChat()" :key="messages.indexOf(message)"> <li v-for="message in getChat()" :key="messages.indexOf(message)">
<div class="text-white inline-flex"> <div class="text-white inline-flex">
<p class="text-sm"> <p class="text-sm">
<strong :style="message.tags.color ? `color: ${message.tags.color};` : ``" class="text-ctp-pink font-bold text-sm">{{ message.username }}</strong <strong
:style="message.tags.color ? `color: ${message.tags.color};` : ``"
class="text-ctp-pink font-bold text-sm"
>{{ message.username }}</strong
>: {{ message.message }} >: {{ message.message }}
</p> </p>
</div> </div>

3
src/components/VideoPlayer.vue
View File

@ -29,8 +29,7 @@ export default {
// initializing the video player // initializing the video player
// when the component is being mounted // when the component is being mounted
mounted() { mounted() {
this.player = videojs('video-player', this.options, () => { this.player = videojs('video-player', this.options, () => {})
})
} }
} }
</script> </script>

30
src/views/HomepageView.vue
View File

@ -8,7 +8,6 @@ export default {
let frontend_url = import.meta.env.VITE_INSTANCE_URL let frontend_url = import.meta.env.VITE_INSTANCE_URL
data.value = await res.json() data.value = await res.json()
return { return {
data, data,
frontend_url, frontend_url,
@ -29,7 +28,7 @@ export default {
const wantedTags = toFilter.split(',').filter((v) => v.toLowerCase()) const wantedTags = toFilter.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')
let tags = [] let tags = []
for (let tag of tagElements) { for (let tag of tagElements) {
@ -38,34 +37,37 @@ export default {
// Create sets from the arrays // Create sets from the arrays
const [set1, set2] = [new Set(wantedTags), new Set(tags)] const [set1, set2] = [new Set(wantedTags), new Set(tags)]
const common = [...set1].filter(x => set2.has(x)); const common = [...set1].filter((x) => set2.has(x))
console.log(wantedTags) console.log(wantedTags)
if(common.length === wantedTags.length) { if (common.length === wantedTags.length) {
category.style.display = "" category.style.display = ''
} else if (wantedTags[0] === "") { } else if (wantedTags[0] === '') {
category.style.display = "" category.style.display = ''
console.log('ok') console.log('ok')
} else { } else {
category.style.display = "none" category.style.display = 'none'
} }
} }
}, },
getNextCategory() { getNextCategory() {
window.onscroll = async () => { window.onscroll = async () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight; let bottomOfWindow =
document.documentElement.scrollTop + window.innerHeight ===
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 fetch(`${import.meta.env.VITE_BACKEND_URL}/api/discover/?cursor=${cursor}`) const res = await fetch(
`${import.meta.env.VITE_BACKEND_URL}/api/discover/?cursor=${cursor}`
)
const data = await res.json() const data = await res.json()
for (let category of data) { for (let category of data) {
this.data.push(category) this.data.push(category)
} }
}
}
} }
} }
}, },