mirror of
https://codeberg.org/SafeTwitch/safetwitch.git
synced 2024-12-22 13:22:58 -05:00
General fixes and prepare for chat
This commit is contained in:
dragongoose
parent
7d680c47cd
commit
95f3f378c4
1 changed files with 53 additions and 50 deletions
|
|
@ -46,7 +46,7 @@ export default {
|
|||
}
|
||||
},
|
||||
components: {
|
||||
VideoPlayer
|
||||
VideoPlayer,
|
||||
},
|
||||
methods: {
|
||||
truncate(value: string, length: number) {
|
||||
|
|
@ -55,8 +55,8 @@ export default {
|
|||
} else {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -84,66 +84,69 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex flex-wrap mx-auto bg-ctp-crust p-6 rounded-lg max-w-prose text-white">
|
||||
<div v-else class="w-full inline-flex space-x-4 justify-center p-4">
|
||||
<div class="flex flex-wrap bg-ctp-crust p-6 rounded-lg max-w-prose min-w-[65ch] text-white">
|
||||
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
|
||||
<video-player
|
||||
:src="`http://localhost:7000/proxy/stream/${data.username}/hls.m3u8`"
|
||||
poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" :autoplay="'muted'" :fluid="true" />
|
||||
</div>
|
||||
|
||||
|
||||
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
|
||||
<video-player
|
||||
src="https://video-weaver.jfk04.hls.ttvnw.net/v1/playlist/CpwF74ZwzfoheHjVAIg7VWZzSnB9W3FgXzezhTA3ye7QTA9aJjprgctuMZwlTRQ1PUqoltrgVBu7SJ3vJfALlIkNYAhuYjZMnFaFnEqzv-jIH0gXW-AWgu3f-vDbarfun78h4vUHecELAqyJM_c6IEDM2b5uHCE1ZfSnZnk2ZV8XHyzbwUz8Uc-e1YM1DyCpGYHrtz_Z-0TR-ordiDzHJ8lFCzn8F8zbbePoFMD2kex4f_6neLyuAfbh2jLZj6JNPt6o63fP2N9WiHxlRT75ACUihbBbI2llL-UCdpA_lXyTWFUud28R2wJGCqt8WUm-wjECnS8BINcThhPEnN_I1imGFN-CwqxqeSMpFkzA05_Q4HoP9Bu-Z4ln2UUw7ljy9OZeYcR0rM29rmKNCa5VPA4mzuAM_2al7JLiabC9t2rJvYZgklWgFaxc6UoChOU5yQsgpac_MNNNz7wIWqgjHSRL-AI4XQDIAHWZwm7GeEB5KJhxvI_8dgnnui7t9MBFU8A2h73iScGGZOmYfK3jQrIG0-kEhjBMCopu4XPv0RxSbSD9SvncTUmNer6ybUKkjXC793AC7xREE1z6xEGQfT5wbTbC2WscKQn883ShGD5XtfW5rZIenitxvNFFgM3Ttwv5FeSY0o8angPRPzexZ5fijOZ2eAmsXgrW_pN380ba4qpbrsaalJcdtysN9Da-QmCWbsjnoKMkQ_-12PwwpDYAIyWjmeW3JrvVMzClK_WV7Z70pEt6yl_9W4Qf0zt4mEyF8ghG4nxPZutSCt4HPilKLzPCLYfcuEiIlW6hZ9riNTP7jf0Yp-afDE89lYGYrj0xNh4C8LahZTNtGWKVkxRxw8w_v2lhBuvmrNJrwjs2Rwyw_EZANqi0_CnvWEMaDKw-7_jk6XNkCi0NtyABKgl1cy1lYXN0LTIwgQY.m3u8"
|
||||
poster="/your-path/poster.jpg" controls :loop="true" :volume="0.6" :autoplay="'muted'" :fluid="true" />
|
||||
</div>
|
||||
<div class="w-full flex-wrap p-3">
|
||||
<div class="inline-flex w-1/2">
|
||||
<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};`">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="inline-flex justify-between">
|
||||
<div class="flex">
|
||||
<div class="container w-28 h-28 relative">
|
||||
<img :src="data.pfp" class="rounded-full border-4 border-ctp-teal p-0.5 w-auto h-28">
|
||||
<span v-if="data.isLive" class="absolute bottom-0 right-[1.8rem] bg-ctp-red font-bold p-2.5 py-0.5 rounded-md">LIVE</span>
|
||||
</div>
|
||||
|
||||
<div class="ml-3">
|
||||
<h1 class="text-4xl font-bold mb-3">{{ data.username }}</h1>
|
||||
<h1 v-if="!data.stream" class="font-bold text-md self-end">{{ data.followersAbbv }} Followers</h1>
|
||||
<div v-else class="w-[12rem]">
|
||||
<p class="text-md font-bold self-end"> {{ truncate(data.stream.title, 200) }} </p>
|
||||
<div class="ml-3 content-between">
|
||||
<h1 class="text-4xl font-bold">{{ data.username }}</h1>
|
||||
<h1 v-if="!data.stream" class="font-bold text-md self-end ">{{ data.followersAbbv }} Followers</h1>
|
||||
<div v-else class="w-[12rem]">
|
||||
<p class="text-sm font-bold text-gray-200 self-end"> {{ truncate(data.stream.title, 75) }} </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex w-1/2 float-right h-full text-right">
|
||||
<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>
|
||||
</div>
|
||||
<div v-else class="w-full">
|
||||
<ul class="text-xs font-bold text-right space-x-1 space-y-1 overflow-y-auto">
|
||||
<li v-for="tag in data.stream.tags" class="inline-flex bg-ctp-mantle p-1.5 px-2 rounded-md">
|
||||
{{ tag }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="pt-5 pr-5 flex rounded-lg">
|
||||
<span v-if="!data.isLive"
|
||||
class="font-bold text-sm bg-ctp-mantle border border-ctp-red p-3.5 rounded-lg">OFFLINE</span>
|
||||
<div v-else class="justify-end">
|
||||
<ul class="flex font-bold flex-wrap text-sm justify-end float-right max-h-24 overflow-y-auto">
|
||||
<li v-for="tag in data.stream.tags" class="p-2.5 py-1 m-0.5 bg-ctp-mantle rounded-md inline-flex">
|
||||
{{ tag }}
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bg-ctp-mantle m-5 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">About</span>
|
||||
</div>
|
||||
|
||||
<p class="mb-5">{{ data.about }}</p>
|
||||
|
||||
<hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
|
||||
|
||||
<ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
|
||||
<li v-for="link in data.socials">
|
||||
<a :href="link.link" class="text-white hover:text-gray-400 mr-4">
|
||||
<v-icon :name="link.type ? `bi-${link.type}` : 'io-link'" class="w-6 h-6 mr-1"></v-icon>
|
||||
<span>{{ link.text }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-ctp-mantle m-5 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">About</span>
|
||||
</div>
|
||||
|
||||
<p class="mb-5">{{ data.about }}</p>
|
||||
|
||||
<hr class="my-auto w-full bg-gray-200 rounded-full opacity-40" />
|
||||
|
||||
<ul class="flex font-semibold text-md justify-start flex-wrap flex-row">
|
||||
<li v-for="link in data.socials">
|
||||
<a :href="link.link" class="text-white hover:text-gray-400 mr-4">
|
||||
<v-icon :name="link.type ? `bi-${link.type}` : 'io-link'" class="w-6 h-6 mr-1"></v-icon>
|
||||
<span>{{ link.text }}</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div v-if="data.isLive" class="p-3 bg-ctp-crust rounded-lg w-full">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in a new issue