Infrastructure/safetwitch
0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 13:22:58 -05:00
Code Issues Activity

Move chat to component

Browse source
This commit is contained in:
dragongoose 2023-03-17 22:57:54 -04:00
parent 6e60138094
commit 0facf85528
2 changed files with 21 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/components/TwitchChat.vue Normal file
View file

@ -0,0 +1,16 @@
<script lang="ts">
export default {
props: {
isLive: {
type: Boolean,
default() {
return false;
}
}
},
}
</script>
<template>
<div v-if="isLive" class="p-3 bg-ctp-crust rounded-lg w-full max-w-xs">
</div>
</template>

16
frontend/src/views/UserView.vue
View file

@ -3,6 +3,7 @@ import { ref, onMounted } from 'vue'
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import type { StreamerData } from '../../../server/types/scraping/Streamer' import type { StreamerData } from '../../../server/types/scraping/Streamer'
import VideoPlayer from '../components/VideoPlayer.vue' import VideoPlayer from '../components/VideoPlayer.vue'
import TwitchChat from '../components/TwitchChat.vue'
export default { export default {
async setup() { async setup() {
@ -49,13 +50,6 @@ export default {
src: src:
`http://localhost:7000/proxy/stream/${username}/hls.m3u8`, `http://localhost:7000/proxy/stream/${username}/hls.m3u8`,
type: 'application/vnd.apple.mpegurl', type: 'application/vnd.apple.mpegurl',
label: 'tt'
},
{
src:
`http://localhost:7000/proxy/stream/${username}/hls.m3u8`,
type: 'application/vnd.apple.mpegurl',
label: 'dd'
}], }],
fluid: true fluid: true
} }
@ -63,6 +57,7 @@ export default {
}, },
components: { components: {
VideoPlayer, VideoPlayer,
TwitchChat
}, },
methods: { methods: {
truncate(value: string, length: number) { truncate(value: string, length: number) {
@ -110,7 +105,7 @@ export default {
<div class="w-full flex-wrap p-3"> <div class="w-full flex-wrap p-3">
<div class="inline-flex w-1/2"> <div class="inline-flex w-2/3">
<div class="w-20 h-20 relative"> <div class="w-20 h-20 relative">
<img :src="data.pfp" class="rounded-full border-4 p-0.5 w-auto h-20" :style="`border-color: ${data.colorHex};`"> <img :src="data.pfp" class="rounded-full border-4 p-0.5 w-auto h-20" :style="`border-color: ${data.colorHex};`">
<span v-if="data.isLive" class="absolute top-16 right-[1.2rem] bg-ctp-red font-bold text-sm p-1.5 py-0.5 rounded-md">LIVE</span> <span v-if="data.isLive" class="absolute top-16 right-[1.2rem] bg-ctp-red font-bold text-sm p-1.5 py-0.5 rounded-md">LIVE</span>
@ -125,7 +120,7 @@ export default {
</div> </div>
</div> </div>
<div class="inline-flex w-1/2 float-right h-full text-right"> <div class="inline-flex w-1/3 float-right h-full text-right">
<div v-if="!data.isLive" class="w-full"> <div v-if="!data.isLive" class="w-full">
<p class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red">OFFLINE</p> <p class="font-bold bg-ctp-mantle p-3 py-2 rounded-lg w-min float-right border-2 border-ctp-red">OFFLINE</p>
</div> </div>
@ -161,8 +156,7 @@ export default {
</div> </div>
<div v-if="data.isLive" class="p-3 bg-ctp-crust rounded-lg w-full"> <twitch-chat :isLive="data.isLive"></twitch-chat>
</div>
</div> </div>
</template> </template>