geoffrey45 992d3a7003 fix 720p screens layout issue
~ add media queries
+ handle responsiveness on folder header
2022-08-11 02:53:24 +03:00

166 lines
3.2 KiB
Vue

<template>
<div class="now-playing-card t-center rounded">
<div class="headin">Now playing</div>
<div
class="button menu rounded"
@click="showContextMenu"
:class="{ context_on: context_on }"
>
<MenuSvg />
</div>
<div class="separator no-border"></div>
<div>
<SongCard :track="queue.currenttrack" />
<div class="l-track-time">
<span class="rounded">{{ formatSeconds(queue.duration.current) }}</span
><span class="rounded">{{ formatSeconds(queue.duration.full) }}</span>
</div>
<Progress />
<HotKeys />
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import useModalStore from "@/stores/modal";
import useQueueStore from "@/stores/queue";
import useQStore from "../../stores/queue";
import useContextStore from "@/stores/context";
import MenuSvg from "../../assets/icons/more.svg";
import trackContext from "@/contexts/track_context";
import { ContextSrc } from "@/composables/enums";
import { formatSeconds } from "@/utils";
import HotKeys from "./NP/HotKeys.vue";
import Progress from "./NP/Progress.vue";
import SongCard from "./NP/SongCard.vue";
const queue = useQStore();
const contextStore = useContextStore();
const context_on = ref(false);
const showContextMenu = (e: Event) => {
e.preventDefault();
e.stopPropagation();
const menus = trackContext(
queue.tracklist[queue.current],
useModalStore,
useQueueStore
);
contextStore.showContextMenu(e, menus, ContextSrc.Track);
context_on.value = true;
contextStore.$subscribe((mutation, state) => {
if (!state.visible) {
context_on.value = false;
}
});
};
</script>
<style lang="scss">
.now-playing-card {
padding: 1rem;
background-color: $primary;
width: 100%;
display: grid;
position: relative;
.l-track-time {
display: flex;
justify-content: space-between;
opacity: 0.8;
margin-top: $small;
span {
font-size: small;
padding: $smaller;
}
}
&:hover {
::-moz-range-thumb {
height: 0.8rem;
}
::-webkit-slider-thumb {
height: 0.8rem;
}
::-ms-thumb {
height: 0.8rem;
}
}
.headin {
font-weight: bold;
font-size: 0.9rem;
}
.button {
position: absolute;
top: $small;
cursor: pointer;
transition: all 200ms;
display: flex;
align-items: center;
padding: $smaller;
&:hover {
background-color: $accent;
}
}
.context_on {
background-color: $accent;
}
.menu {
right: $small;
transform: rotate(90deg);
}
.art {
width: 100%;
aspect-ratio: 1;
place-items: center;
margin-bottom: $small;
.l-image {
height: 100%;
width: 100%;
}
}
#bitrate {
position: absolute;
font-size: 0.75rem;
width: max-content;
padding: 0.2rem 0.35rem;
top: 14.25rem;
left: 1.5rem;
background-color: $black;
border-radius: $smaller;
box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.438);
}
.title {
font-weight: 900;
word-break: break-all;
}
.artists {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.808);
&:hover {
text-decoration: underline 1px !important;
}
}
}
</style>