Add banners and always show chat
This commit is contained in:
parent
2ad3893b61
commit
958aea89ea
@ -22,6 +22,7 @@ export interface StreamerData {
|
|||||||
about: string
|
about: string
|
||||||
socials?: Social[]
|
socials?: Social[]
|
||||||
pfp: string
|
pfp: string
|
||||||
|
banner: string
|
||||||
stream?: StreamData | null
|
stream?: StreamData | null
|
||||||
isPartner: boolean | null
|
isPartner: boolean | null
|
||||||
colorHex: string
|
colorHex: string
|
||||||
|
@ -15,19 +15,11 @@ export default {
|
|||||||
inject: ["rootBackendUrl"],
|
inject: ["rootBackendUrl"],
|
||||||
async setup() {
|
async setup() {
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const username = route.params.username
|
|
||||||
const data = ref<StreamerData>()
|
const data = ref<StreamerData>()
|
||||||
const status = ref<"ok" | "error">()
|
const status = ref<"ok" | "error">()
|
||||||
const rootBackendUrl = inject('rootBackendUrl')
|
|
||||||
const videoOptions = {
|
const videoOptions = {
|
||||||
autoplay: true,
|
autoplay: true,
|
||||||
controls: true,
|
controls: true,
|
||||||
sources: [
|
|
||||||
{
|
|
||||||
src: `${rootBackendUrl}/proxy/stream/${username}/hls.m3u8`,
|
|
||||||
type: 'application/vnd.apple.mpegurl'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
fluid: true
|
fluid: true
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -71,11 +63,14 @@ export default {
|
|||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
|
class="flex bg-ctp-crust flex-col p-6 rounded-lg w-[99vw] md:max-w-prose md:min-w-[65ch] lg:max-w-[70rem] text-white"
|
||||||
|
|
||||||
>
|
>
|
||||||
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
|
<div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
|
||||||
<video-player :options="videoOptions"> </video-player>
|
<video-player :options="videoOptions"> </video-player>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<img v-else :src="data.banner" alt="Streamer banner" class="rounded-md opacity-70 relative mb-2">
|
||||||
|
|
||||||
<div class="w-full flex-wrap md:p-3">
|
<div class="w-full flex-wrap md:p-3">
|
||||||
<div class="inline-flex md:w-4/5">
|
<div class="inline-flex md:w-4/5">
|
||||||
<div class="w-20 h-20 relative">
|
<div class="w-20 h-20 relative">
|
||||||
@ -151,6 +146,6 @@ export default {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<twitch-chat :isLive="data.isLive" :channelName="data.login"></twitch-chat>
|
<twitch-chat :isLive="true" :channelName="data.login"></twitch-chat>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user