elnafo-radio/crates/frontend/src/components/Station.vue

<script setup lang="ts">
import { api } from "@";
import PlayIcon from "@/components/PlayIcon.vue";
import PauseIcon from "@/components/PauseIcon.vue";
import ExternalIcon from "@/components/ExternalIcon.vue";
import LocationIcon from "@/components/LocationIcon.vue"
import TicketIcon from "@/components/TicketIcon.vue";
import VinylIcon from "@/components/VinylIcon.vue";
import InfoIcon from "@/components/InfoIcon.vue";
import Tooltip from "@/components/Tooltip.vue";
import { store } from "@";
import { onMounted, ref } from "vue";

const player = store.usePlayer();
const isPlayable = ref(null);

const { stationInfo } = defineProps({
    stationInfo: api.StationInfo,
});

const status = () => {
    if (stationInfo.status === api.StationStatus.Receive) {
        isPlayable.value = api.StationStatus.Online;
        return;
    }
    if (stationInfo.playback === api.Playback.Stopped || stationInfo.playback === api.Playback.Paused) {
        isPlayable.value = api.StationStatus.Offline;
        return;
    }
    isPlayable.value = stationInfo.status;
};

onMounted(() => {
    status();
});

</script>

<template>
    <div class="flex rounded-xl m-2 bg-ctp-base">
        <div class="flex items-center justify-center">
            <div class="h-20 sm:h-36 flex rounded-l-xl aspect-square items-center justify-center bg-ctp-peach/50">
                <VinylIcon class="p-1" />
            </div>
        </div>
        <div class="w-full flex flex-col justify-center px-4 space-y-2">
            <div class="flex h-8 sm:h-10 items-center">
                <span class="flex-grow font-bold text-ctp-peach text-xl sm:text-2xl">{{ stationInfo.name }}</span>

            </div>
            <div class="hidden sm:flex flex-col space-y-1">
                <div v-if="stationInfo.location" class="flex items-center space-x-1">
                    <LocationIcon class="text-ctp-subtext0" />
                    <span class="text-ctp-subtext0">{{ stationInfo.location }}</span>
                </div>
                <div v-if="stationInfo.genre" class="flex items-center space-x-1">
                    <TicketIcon class="text-ctp-subtext0" />
                    <span class="text-ctp-subtext0">{{ stationInfo.genre }}</span>
                </div>
            </div>
        </div>

        <div class="flex flex-col justify-center pr-4 space-y-2">
            <div class="flex items-center justify-center space-x-2">
                <button
                    class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
                    <Tooltip :text="stationInfo.status">
                        <InfoIcon class="text-ctp-peach" />
                    </Tooltip>
                </button>
                <a :href="stationInfo.url"
                    class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50 cursor-pointer">
                    <ExternalIcon class="text-ctp-peach" />
                </a>
                <button v-if="isPlayable === api.StationStatus.Online"
                    @click="player.playing ? (player.station?.id === stationInfo.id ? player.pause() : player.play(stationInfo)) : player.play(stationInfo)"
                    class="p-1.5 sm:p-2.5 w-8 sm:w-10 inline-flex rounded-md items-center justify-center bg-ctp-mantle hover:bg-ctp-mantle/50">
                    <PauseIcon v-if="player.station?.id === stationInfo.id && player.playing" class="text-ctp-peach" />
                    <PlayIcon v-else class="text-ctp-peach" />
                </button>

            </div>

        </div>

    </div>
</template>