diff --git a/app/components/Player/Fullscreen.vue b/app/components/Player/Fullscreen.vue
index 6cfbae9..40f906f 100644
--- a/app/components/Player/Fullscreen.vue
+++ b/app/components/Player/Fullscreen.vue
@@ -55,9 +55,7 @@ nuxtApp.hook("page:finish", () => {
/>
-
+
@@ -66,6 +67,22 @@ const durationFormatted = computed(() =>
@click="repeat = !repeat"
/>
+
+
+
+ {
+ if (v !== undefined) volume = v
+ }
+ "
+ :max="1"
+ :min="0"
+ :step="0.01"
+ monochrome
+ />
+
@@ -127,12 +144,11 @@ const durationFormatted = computed(() =>
width: 100%;
gap: 1rem;
- overflow: hidden;
- max-height: 30px;
- transition: max-height 0.2s ease-in-out;
+ transition: opacity 0.2s ease-in-out;
&.hidden {
- max-height: 0;
+ opacity: 0;
+ pointer-events: none;
}
& > * {
@@ -143,4 +159,23 @@ const durationFormatted = computed(() =>
color: $color-accent;
}
}
+
+.volume-slider {
+ align-self: stretch;
+ margin: 0.5rem 1rem 0;
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ opacity: 1;
+ transition: opacity 0.2s ease-in-out;
+
+ :deep(.slider) {
+ flex: 1;
+ }
+
+ &.hidden {
+ opacity: 0;
+ pointer-events: none;
+ }
+}