valere/evilspins
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 4 Releases Wiki Activity

PLATINE blur bobine
All checks were successful
Deploy App / build (push) Successful in 1m53s
Details
Deploy App / deploy (push) Successful in 15s
Details

Browse Source
This commit is contained in:
valere
2026-01-04 23:01:26 +01:00
parent 11694d36dd
commit c586cc3932
2 changed files with 14 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/components/Platine.vue
View File

@@ -1,14 +1,14 @@
<template>
<div class="platine pointer-events-none" :class="{ 'loading': platineStore.isLoadingTrack, 'mounted': isMounted }"
ref="platine">
<div class="disc pointer-events-auto fixed" ref="discRef" style="background-image: url(/card-dock.svg)" id="disc">
<div
class="bobine bg-slate-900 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
<img class="cover" :src="platineStore.currentTrack?.coverId" />
<div class="disc pointer-events-auto fixed bg-transparent" ref="discRef" id="disc">
<div class="bobine"
:style="{ height: platineStore.progressPercentage + '%', width: platineStore.progressPercentage + '%' }"></div>
<img class="cover" :src="platineStore.currentTrack?.coverId" :alt="platineStore.currentTrack?.title">
<div class="disc-label rounded-full bg-cover bg-center">
<img src="/favicon.svg" class="size-1/3">
<img src="/favicon.svg" class="size-1/2 bg-black rounded-full p-5">
<div v-if="platineStore.isLoadingTrack" class="loading-indicator">
<div class="spinner"></div>
</div>
@@ -16,11 +16,11 @@
<div v-if="!platineStore.isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
</div>
</div>
<div class="w-full h-1/5 text-base">
<!-- <div class="w-full h-1/5 text-base">
{{ platineStore.currentTrack?.title }}
<br>
{{ platineStore.currentTrack?.artist?.name }}
</div>
</div> -->
</div>
</template>
@@ -64,11 +64,9 @@ watch(() => props.track, (newTrack) => {
position: relative;
width: 100%;
height: 100%;
padding: 20px;
.card {
position: absolute !important;
z-index: 99;
top: -20%;
left: 50%;
bottom: 0;
@@ -78,7 +76,6 @@ watch(() => props.track, (newTrack) => {
.disc {
position: relative;
background-color: white;
aspect-ratio: 1;
width: 100%;
overflow: hidden;
@@ -86,10 +83,10 @@ watch(() => props.track, (newTrack) => {
cursor: grab;
background-position: center;
background-size: cover;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
.dragoOver & {
background-color: #4CAF50;
.loading & {
box-shadow: none;
}
}
@@ -162,11 +159,12 @@ watch(() => props.track, (newTrack) => {
height: 100%;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
z-index: 10;
}
.cover {
position: absolute;
top: 0;
left: 0;
border-radius: 100%;
object-fit: cover;
width: 100%;
@@ -195,15 +193,6 @@ watch(() => props.track, (newTrack) => {
}
.bobine {
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
opacity: 0.7;
}
@apply bg-slate-900 bg-opacity-50 backdrop-blur absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full;
}
</style>