safetwitch/src/views/UserView.vue

<script lang="ts">
import { ref, inject } from 'vue'
import { useRoute } from 'vue-router'

import VideoPlayer from '@/components/VideoPlayer.vue'
import TwitchChat from '@/components/TwitchChat.vue'
import ErrorMessage from '@/components/ErrorMessage.vue'
import FollowButton from '@/components/FollowButton.vue'
import LoadingScreen from '@/components/LoadingScreen.vue'
import VideoTab from '@/components/user/VideoTab.vue'
import AudioPlayer from '@/components/AudioPlayer.vue'

import type { StreamerData } from '@/types'
import { truncate, abbreviate, getEndpoint } from '@/mixins'
import { chatVisible, getSetting } from '@/settingsManager'

export default {
  inject: ['rootBackendUrl'],
  async setup() {
    const route = useRoute()
    const username = route.params.username
    const data = ref<StreamerData>()
    const status = ref<'ok' | 'error'>()
    const rootBackendUrl = inject('rootBackendUrl')
    const videoOptions = {
      autoplay: getSetting("autoplay"),
      controls: true,
      sources: [
        {
          src: `${rootBackendUrl}/proxy/stream/${username}/hls.m3u8`,
          type: 'application/vnd.apple.mpegurl'
        }
      ],
      fluid: true
    }
    const audioOptions = `${rootBackendUrl}/proxy/stream/${username}/hls.m3u8`

    return {
      data,
      status,
      videoOptions,
      audioOptions
    }
  },
  async mounted() {
    // check if audio only
    const audioOnly = getSetting("audioOnly")
    if (audioOnly) {
      this.$router.push({ query: { "audio-only": "true" } })
    }

    const username = this.$route.params.username

    await getEndpoint('api/users/' + username)
      .then((data) => {
        this.data = data
      })
      .catch(() => {
        this.status = 'error'
      })
  },
  components: {
    VideoPlayer,
    TwitchChat,
    ErrorMessage,
    FollowButton,
    LoadingScreen,
    VideoTab,
    AudioPlayer
  },
  methods: {
    truncate,
    abbreviate,
    chatVisible,
    getSetting
  }
}
</script>

<template>
  <loading-screen v-if="!data && status != 'error'"></loading-screen>
  <error-message v-else-if="status == 'error'"></error-message>

  <div
    v-else-if="data"
    class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
  >
    <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"
    >
      <div v-if="data.isLive" class="w-full mx-auto rounded-lg mb-5">
        <video-player v-if="Boolean($route.query['audio-only']) === false" :options="videoOptions"> </video-player>
        <audio-player v-else :masterManifestUrl="audioOptions"></audio-player>
      </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="inline-flex md:w-4/5">
          <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 flex left-1/2 translate-x-[-50%] whitespace-nowrap uppercase top-16 bg-ctp-red font-bold text-sm p-1.5 py-0.5 rounded-md"
              >{{ $t('main.live') }}</span
            >
          </div>

          <div class="ml-3 content-between">
            <div class="">
              <h1 class="text-2xl md:text-4xl font-bold inline-block">{{ data.username }}</h1>
              <a v-if="$route.query['audio-only'] !== 'true'" href="?audio-only=true">
                <v-icon name="bi-headphones" class="ml-1 w-8 h-8 inline-block"></v-icon>
              </a>
              <a v-else :href="$route.params.username.toString()">
                <v-icon name="bi-camera-video-fill" class="ml-1 w-8 h-8 inline-block"></v-icon>
              </a>
            </div>
            <div v-if="data.stream" class="w-[14rem] md:w-[17rem]">
              <p class="text-sm font-bold text-gray-200 self-end">
                {{ truncate(data.stream.title, 130) }}
              </p>
            </div>
          </div>
        </div>

        <div class="flex-col md:inline-flex md:w-1/5 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-left md:text-right space-x-1 space-y-1 overflow-y-auto"
              v-if="getSetting('streamTagsVisible')"
            >
              <li
                v-for="tag in data.stream!.tags"
                :key="tag"
                class="inline-flex bg-ctp-mantle p-1.5 px-2 rounded-md"
              >
                {{ tag }}
              </li>
            </ul>
          </div>
        </div>

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

      <!-- VIDEOS TAB -->
      <video-tab class="mb-4"></video-tab>

      <!-- ABOUT TAB -->
      <div v-if="getSetting('streamerAboutSectionVisible')" class="bg-ctp-mantle mt-1 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">{{ $t('streamer.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" :key="link.url">
            <a :href="link.url" class="text-white hover:text-gray-400 mr-4">
              <v-icon :name="`bi-${link.type}`" class="w-6 h-6 mr-1"></v-icon>
              <span>{{ link.name }}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <twitch-chat
      v-if="chatVisible()"
      :isLive="true"
      :channelName="data.login"
      class="h-2/3"
    ></twitch-chat>
  </div>
</template>