0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2024-12-22 05:12:57 -05:00

Follow button fix and stream preview cleanup #34

This commit is contained in:
dragongoose 2023-09-08 21:46:19 -04:00
parent 5a81d24b3f
commit cab9113509
No known key found for this signature in database
GPG key ID: 01397EEC371CDAA5
5 changed files with 50 additions and 47 deletions

View file

@ -19,12 +19,16 @@ export default {
followStreamer() {
const username = this.$props.username
const follows = localStorage.getItem('following')
let parsedFollows: string[] = []
if (!follows) return
if (this.isFollowing && follows) {
const index = JSON.parse(follows).indexOf(username)
let parsedFollows: string[] = JSON.parse(follows)
if (follows?.includes(username)) {
const index = parsedFollows.indexOf(username)
console.log(index)
if (index === -1) return
parsedFollows = parsedFollows.splice(index, 1)
console.log(parsedFollows)
this.isFollowing = false
} else {
if (follows) parsedFollows = JSON.parse(follows)

View file

@ -1,79 +1,78 @@
<script lang="ts">
import { inject } from 'vue'
export interface Stream {
tags: string[]
title: string
topic: string
startedAt: number
viewers: number
preview: string
streamer: {
pfp: string
name: string
}
}
import { getEndpoint, abbreviate } from '@/mixins'
import type { StreamerData, CategoryMinifiedStream } from '@/types'
export default {
props: {
stream: {},
stream: {
type: Object
},
name: {
type: String
}
},
async setup(props) {
const protocol = inject('protocol')
let streamData: Stream | null = null
if (!props.stream && props.name) {
const streamDataFetch = await fetch(
`${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/users/${props.name}`
)
const data = (await streamDataFetch.json()).data
if (data.stream) {
data.stream.streamer = { name: props.name, pfp: data.pfp }
streamData = data.stream
let data: StreamerData
if (props.stream) {
const streamData = props.stream as CategoryMinifiedStream
// lossy converstion to avoid making tons of requests
// by using minimal data from category request
data = {
username: streamData.streamer.name,
login: streamData.streamer.name,
followers: 0,
isLive: true,
about: "",
pfp: streamData.streamer.pfp,
banner: "",
isPartner: false,
colorHex: streamData.streamer.colorHex,
id: 0,
stream: {
title: streamData.title,
tags: streamData.tags,
startedAt: 0,
topic: "",
viewers: streamData.viewers,
preview: streamData.preview
}
}
} else {
streamData = props.stream as Stream
data = await getEndpoint("api/users/" + props.name)
}
const frontend_url = protocol + import.meta.env.SAFETWITCH_INSTANCE_DOMAIN
return {
frontend_url,
streamData,
data,
protocol
}
},
methods: {
abbreviate(text: number) {
return Intl.NumberFormat('en-US', {
//@ts-ignore
notation: 'compact',
maximumFractionDigits: 1
}).format(text)
}
abbreviate
}
}
</script>
<template>
<div v-if="streamData">
<div v-if="data.stream">
<div class="bg-ctp-crust rounded-lg w-[23rem] md:w-[27rem]">
<RouterLink :to="'/' + streamData.streamer.name">
<img :src="streamData.preview" class="rounded-lg rounded-b-none" />
<RouterLink :to="'/' + data.login">
<img :src="data.stream.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">
<div class="inline-flex">
<img :src="streamData.streamer.pfp" class="rounded-full mr-2" />
<img :src="data.pfp" class="rounded-full mr-2" />
<div class="w-full">
<p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ streamData.title }}</p>
<p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ data.stream.title }}</p>
<div class="inline-flex w-full justify-between">
<p class="text-gray-300">{{ streamData.streamer.name }}</p>
<p class="text-gray-300">{{ data.username }}</p>
<p class="self-end float-right">
<v-icon name="io-person"></v-icon> {{ abbreviate(streamData.viewers) }}
<v-icon name="io-person"></v-icon> {{ abbreviate(data.stream.viewers) }}
</p>
</div>
</div>

View file

@ -101,11 +101,11 @@ export default {
<div v-if="following.length > 0" class="p-2 text-white">
<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">
<ul class="flex overflow-x-scroll space-x-2 flex-nowrap h-[22rem] items-center">
<li
v-for="streamer in following"
:key="streamer"
class="inline-block hover:scale-105 transition-transform"
class="inline-block"
>
<stream-preview-vue :name="streamer"></stream-preview-vue>
</li>

View file

@ -157,7 +157,7 @@ export default {
</div>
<div class="pt-2 inline-flex">
<follow-button :username="data.username"></follow-button>
<follow-button :username="data.login"></follow-button>
<p class="align-baseline font-bold ml-3">
{{ abbreviate(data.followers) }} {{ $t('main.followers') }}
</p>

View file

@ -110,7 +110,7 @@ export default {
</div>
<div class="pt-2 inline-flex">
<follow-button :username="data.streamer.username"></follow-button>
<follow-button :username="data.streamer.login"></follow-button>
<p class="align-baseline font-bold ml-3">
{{ abbreviate(data.streamer.followers) }} {{ $t('main.followers') }}
</p>