feat: Full screen music UI, playback and home header improvements #520

ferferga · 2021-01-08T13:06:29Z

Changes

Volume slider now applies the changes immediately (before, it only was applied when the slider was released).
Volume slider icon changes depending on the selected volume.
Playlists work now.
Add shuffle and repeat functionality
Refactor image handling for further modularity and moved all the checks from BlurhashImage to imageHelper.
First draft of a full screen music player (with smooth transitions everywhere):

2021-01-08.13-52-45.mp4

2021-01-08.13-56-48.mp4

Move progress slider to its own component.
Refactor backdrop store. Backdrop is now fully reactive and it's opacity is fully configurable.
Add blurhash of the current displayed item in home header to the home page:

2021-01-08.13-46-09.1.mp4

To do

Improvements to responsive design (for another PR).

Updates

Changed the miniplayer design between commits:

Full screen controls:

Active controls (with elevation):

Reduced window:

codecov-io · 2021-01-08T13:40:19Z

Codecov Report

Merging #520 (be092ff) into master (9077992) will decrease coverage by 0.03%.
The diff coverage is 0.00%.

@@            Coverage Diff            @@
##           master    #520      +/-   ##
=========================================
- Coverage    0.59%   0.56%   -0.04%     
=========================================
  Files          88      89       +1     
  Lines        2344    2492     +148     
  Branches      355     372      +17     
=========================================
  Hits           14      14              
- Misses       2329    2477     +148     
  Partials        1       1

Impacted Files	Coverage Δ
components/Item/ItemMenu.vue	`0.00% <ø> (ø)`
components/Item/Metadata/ImageEditor.vue	`0.00% <0.00%> (ø)`
components/Item/PersonList.vue	`0.00% <0.00%> (ø)`
components/Item/RelatedItems.vue	`0.00% <0.00%> (ø)`
components/Layout/AudioControls.vue	`0.00% <0.00%> (ø)`
components/Layout/Backdrop.vue	`0.00% <0.00%> (ø)`
components/Layout/HomeHeader/HomeHeader.vue	`0.00% <ø> (ø)`
components/Layout/HomeHeader/HomeHeaderItems.vue	`0.00% <0.00%> (ø)`
components/Layout/HomeHeader/HomeHeaderWelcome.vue	`0.00% <ø> (ø)`
components/Layout/Images/BlurhashCanvas.vue	`70.00% <0.00%> (-3.69%)`	⬇️
... and 17 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 9077992...be092ff. Read the comment docs.

camc314

this album is not centred

IMHO the album art is too big, How about having the are on the LHS, and putting the queue or the playing info on the RHS.

components/Item/TimeSlider.vue

components/Item/Metadata/ImageEditor.vue

components/Layout/AudioControls.vue

camc314 · 2021-01-08T14:02:30Z

layouts/default.vue

@@ -2,6 +2,7 @@
  <v-app ref="app">
    <backdrop />
    <v-navigation-drawer
+      v-if="$store.state.page.showNavDrawer"


Why hide the nav drawer?

@camc314 it's a full screen player.

@ferferga Could it maybe be tied to fullscreen-ness of the player? Also the drawer already has a drawer model and it could be seen as redundant?

Maybe even have an event being emitted from the audio controls to play with the drawer model directly?

I agree with Thibault, v-model already does this and it's be better to use that instead

For future reference, and as it was discussed in Matrix, we're going to leave this as an v-if so toggling the nav drawer doesn't mess with the user's behaviour. Going the v-model route would require to store another variable that contains whether the user has the navdrawer hidden or not before toggling ot, so we can act accordingly after unhiding it.

If we want to switch everything to v-model at some point, we need to take care of that.

components/Layout/AudioControls.vue

camc314 · 2021-01-08T14:05:35Z

components/Layout/AudioControls.vue

+            <transition name="fade-fast" mode="in-out">
+              <v-tooltip v-if="!isFullScreenPlayer" top>
+                <template #activator="{ on, attrs }">
+                  <nuxt-link tag="span" :to="'/playback'">
+                    <v-btn icon class="ml-2" v-bind="attrs" v-on="on">
+                      <v-icon>mdi-fullscreen</v-icon>
+                    </v-btn>
+                  </nuxt-link>
+                </template>
+                <span>{{ $t('fullScreen') }}</span>
+              </v-tooltip>
+            </transition>


What is wrong with expanding the modal to full screen?

@camc314 Swiper's weirdness, DOM performance (slides are expensive, and with items in the background, much worse) and a bug in Vuetify where the scrollbar doesn't disappear and allowed you to scroll the things that were below the v-dialog.

components/Layout/AudioControls.vue

camc314 · 2021-01-08T14:10:47Z

components/Layout/AudioControls.vue

+    isFullScreenPlayer(): boolean {
+      return this.$route.name === 'playback';
+    },


Why not use isMinimized?

@camc314 If going from /playback to / directly in the address bar, the store doesn't get the mutation, so the fullscreen UI is still there.

I also reproduced this when switching between users/servers. We should maybe make an store call on page reload so everything gets cleared (but login info and DisplayPreferences), but that's for another PR.

components/Layout/AudioControls.vue

heyhippari · 2021-01-08T14:21:15Z

IMHO the album art is too big, How about having the are on the LHS, and putting the queue or the playing info on the RHS.

This is meant to be a full screen, kiosk-like experience :p There's a separate queue screen planned with a different view. Main goal here is to just show the album art and give basic info and controls, to show on like a TV screen or a wall tablet or something.

ferferga · 2021-01-08T14:26:17Z

@camc314 Are you able to reproduce the off-center issue with the latest force-pushed changes?

Original commits already had the hack enabled, but not on mount. Check nolimits4web/swiper#886

camc314 · 2021-01-08T14:40:15Z

@camc314 Are you able to reproduce the off-center issue with the latest force-pushed changes?

Yes, no change

camc314 · 2021-01-08T15:05:21Z

This is meant to be a full screen, kiosk-like experience :p There's a separate queue screen planned with a different view. Main goal here is to just show the album art and give basic info and controls, to show on like a TV screen or a wall tablet or something.

Forgive me, I'm don't think I quite understand. Is this layout going to be used for TVs and full screen desktops then, and a different one used for mobile and non-full screen desktops?

ferferga · 2021-01-08T15:10:24Z

@camc314 This is similar to what YouTube Music, Tidal and Spotify has. It's just a page where you can leave the player sitting there while relaxing :P

It's like opening VLC, it also displays the cover at full screen.

Some example photos from other services:

camc314 · 2021-01-09T16:09:23Z

@camc314 This is similar to what YouTube Music, Tidal and Spotify has. It's just a page where you can leave the player sitting there while relaxing :P

Ok, that makes more sense

mixins/imageHelper.ts

…ists and mute/unmute ability

…nor fixes

sonarqubecloud · 2021-01-14T12:21:38Z

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
13 Code Smells

No Coverage information
4.1% Duplication

ferferga mentioned this pull request Jan 8, 2021

Refactor/time - Refactor time slider #517

Merged

ferferga force-pushed the full-screen-music branch 3 times, most recently from 3dc6ddc to 039a643 Compare January 8, 2021 13:39

ferferga force-pushed the full-screen-music branch 2 times, most recently from fe15bb6 to f9600d7 Compare January 8, 2021 13:45

camc314 reviewed Jan 8, 2021

View reviewed changes

components/Layout/AudioControls.vue Outdated Show resolved Hide resolved

ferferga force-pushed the full-screen-music branch from 5daf4ba to 4ad4de4 Compare January 8, 2021 14:46

ferferga force-pushed the full-screen-music branch 2 times, most recently from 802445e to cd0fadb Compare January 8, 2021 15:07

ferferga force-pushed the full-screen-music branch from cd0fadb to 4951b0c Compare January 8, 2021 15:18

ferferga mentioned this pull request Jan 8, 2021

Item page improvements #521

Merged

ferferga force-pushed the full-screen-music branch 2 times, most recently from b33c75d to 220f169 Compare January 9, 2021 13:20

This was referenced Jan 9, 2021

revert(card): reverts 4a72c51, should fix missing images on home screen #524

Closed

More small fixes #523

Merged

ferferga force-pushed the full-screen-music branch from 220f169 to dbdab28 Compare January 9, 2021 22:53

ferferga mentioned this pull request Jan 10, 2021

test(backdrop): add test for backdrop store #532

Merged

ferferga force-pushed the full-screen-music branch 3 times, most recently from 3a82b94 to 9856d87 Compare January 11, 2021 15:15

camc314 reviewed Jan 14, 2021

View reviewed changes

mixins/imageHelper.ts Outdated Show resolved Hide resolved

mixins/imageHelper.ts Outdated Show resolved Hide resolved

mixins/imageHelper.ts Outdated Show resolved Hide resolved

ferferga force-pushed the full-screen-music branch from dfd0778 to a23ed31 Compare January 14, 2021 12:17

ferferga requested a review from camc314 January 14, 2021 12:17

ferferga added 17 commits January 14, 2021 13:20

refactor: imageHelper, blurhashImage, backdrop and backdrop store

fd17603

refactor: calls to backdrop store

8f356f1

feat: add transition to audio controls

3afdd20

refactor: add global style class to components

b2d47dd

fix: tracks being reported as paused

c5e9843

feat(music): create full screen music player

8b6de3c

feat (playbackmanager): add shuffle and repeat features

fc3d8b8

feat(homeheader): show backdrop of current image

4478031

fix(music-ui): styling pass

d9db01e

refactor: address review comments

6551ae0

feat: address more review comments, change control design, handle art…

a77ff83

…ists and mute/unmute ability

refactor: improve artist whitespace handling in audio controls and mi…

e12991c

…nor fixes

fix: force repeatall mode when queue only has one item

b10cf49

refactor(playbackmanager): remove redundant mutations

cbbda7d

fix: refactor & use blurhashimage, disable touch and touch simulation

ec54e41

feat: add transitions to blurhashcanvas and fix blurhashimage ones

b4d08d3

refactor: use ImageType enum properly and address review comments

508ae4c

ferferga force-pushed the full-screen-music branch from a23ed31 to 508ae4c Compare January 14, 2021 12:20

heyhippari approved these changes Jan 14, 2021

View reviewed changes

camc314 approved these changes Jan 14, 2021

View reviewed changes

camc314 merged commit 381b061 into master Jan 14, 2021

camc314 deleted the full-screen-music branch January 14, 2021 14:54

This was referenced Jan 14, 2021

test(page): add tests for page store #533

Merged

fix(playback): fixes uncentered album art on playback page. Fixes #558 #564

Merged

ferferga mentioned this pull request Mar 11, 2023

refactor: merge fullscreen player and other refactors #1899

Merged

ferferga mentioned this pull request Jul 4, 2024

refactor: mark vue as official awesome-jellyfin/awesome-jellyfin#90

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Full screen music UI, playback and home header improvements #520

feat: Full screen music UI, playback and home header improvements #520

ferferga commented Jan 8, 2021 •

edited

Loading

codecov-io commented Jan 8, 2021 •

edited

Loading

camc314 left a comment

camc314 Jan 8, 2021

ferferga Jan 8, 2021

ThibaultNocchi Jan 13, 2021 •

edited

Loading

heyhippari Jan 14, 2021

ferferga Jan 14, 2021

camc314 Jan 8, 2021

ferferga Jan 8, 2021

camc314 Jan 8, 2021

ferferga Jan 8, 2021 •

edited

Loading

heyhippari commented Jan 8, 2021

ferferga commented Jan 8, 2021 •

edited

Loading

camc314 commented Jan 8, 2021

camc314 commented Jan 8, 2021

ferferga commented Jan 8, 2021 •

edited

Loading

camc314 commented Jan 9, 2021

sonarqubecloud bot commented Jan 14, 2021

feat: Full screen music UI, playback and home header improvements #520

feat: Full screen music UI, playback and home header improvements #520

Conversation

ferferga commented Jan 8, 2021 • edited Loading

Changes

To do

Updates

codecov-io commented Jan 8, 2021 • edited Loading

Codecov Report

camc314 left a comment

Choose a reason for hiding this comment

camc314 Jan 8, 2021

Choose a reason for hiding this comment

ferferga Jan 8, 2021

Choose a reason for hiding this comment

ThibaultNocchi Jan 13, 2021 • edited Loading

Choose a reason for hiding this comment

heyhippari Jan 14, 2021

Choose a reason for hiding this comment

ferferga Jan 14, 2021

Choose a reason for hiding this comment

camc314 Jan 8, 2021

Choose a reason for hiding this comment

ferferga Jan 8, 2021

Choose a reason for hiding this comment

camc314 Jan 8, 2021

Choose a reason for hiding this comment

ferferga Jan 8, 2021 • edited Loading

Choose a reason for hiding this comment

heyhippari commented Jan 8, 2021

ferferga commented Jan 8, 2021 • edited Loading

camc314 commented Jan 8, 2021

camc314 commented Jan 8, 2021

ferferga commented Jan 8, 2021 • edited Loading

camc314 commented Jan 9, 2021

sonarqubecloud bot commented Jan 14, 2021

ferferga commented Jan 8, 2021 •

edited

Loading

codecov-io commented Jan 8, 2021 •

edited

Loading

ThibaultNocchi Jan 13, 2021 •

edited

Loading

ferferga Jan 8, 2021 •

edited

Loading

ferferga commented Jan 8, 2021 •

edited

Loading

ferferga commented Jan 8, 2021 •

edited

Loading