76 lines
3.1 KiB
Vue
76 lines
3.1 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { api } from "@";
|
||
|
|
import PlayIcon from "@/components/PlayIcon.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 "@";
|
||
|
|
|
||
|
|
const player = store.usePlayer();
|
||
|
|
|
||
|
|
const { stationInfo } = defineProps({
|
||
|
|
stationInfo: api.StationInfo,
|
||
|
|
});
|
||
|
|
|
||
|
|
const status = () => {
|
||
|
|
if (stationInfo.status === api.StationStatus.Receive) {
|
||
|
|
return api.StationStatus.Online;
|
||
|
|
}
|
||
|
|
if (stationInfo.playback === api.Playback.Stopped || stationInfo.playback === api.Playback.Paused) {
|
||
|
|
return api.StationStatus.Offline;
|
||
|
|
}
|
||
|
|
return stationInfo.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-maroon/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="status()">
|
||
|
|
<InfoIcon class="text-ctp-peach" />
|
||
|
|
</Tooltip>
|
||
|
|
</button>
|
||
|
|
<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">
|
||
|
|
<ExternalIcon class="text-ctp-peach" />
|
||
|
|
</button>
|
||
|
|
<button v-if="status()" @click="player.load(stationInfo, true)"
|
||
|
|
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">
|
||
|
|
<PlayIcon class="text-ctp-peach" />
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|