feat(web): vidstack player #17567
feat(web): vidstack player #17567
Conversation
|
Deploying preview environment to https://pr-17567.preview.internal.immich.cloud/ |
|
This looks great! Only comment is that it appears that the buffering bar doesn't move after the initial load, it is just stuck in a random position. You can see it here in this screenshot for this short motion photo, but it happens for longer videos too.
|
I believe this happens because the browser only loads enough video as it thinks it needs to be able to play without stutter. That bar indicates how much of the file was actually loaded. Meaning, you can seek to any point without delay in that area. |
|
Hey Min, great work! Some strange UI issues I notice are
|
|
I noticed the same issue |
|
Hi Min! Looks good to me. Last comment, is it possible to always show the slider position instead of only showing when you are hovering on the progress bar? |
danieldietzler
left a comment
danieldietzler
left a comment
There was a problem hiding this comment.
Code looks good to me; haven't actually tested the PR
| "svelte.enable-ts-plugin": true, | ||
| "typescript.preferences.importModuleSpecifier": "non-relative" | ||
| "typescript.preferences.importModuleSpecifier": "non-relative", | ||
| "html.customData": [".web/node_modules/vidstack/vscode.html-data.json"] |
There was a problem hiding this comment.
Oh it's a vite plugin and you need this to hint it at the correct type or something?
There was a problem hiding this comment.
Vidstack is a web component, and i think this adds some of the attributes/tags that vidstack ships to the vscode HTML LSP: https://github.com/microsoft/vscode-html-languageservice/blob/main/docs/customData.md
web/src/lib/components/asset-viewer/video-viewer/buttons/airplay-button.svelte
Show resolved
Hide resolved
| if (event.detail.direction === 'left') { | ||
| onNextAsset(); | ||
| } | ||
| if (event.detail.direction === 'right') { | ||
| onPreviousAsset(); | ||
| } |
There was a problem hiding this comment.
Could argue that an else if (or probably even nicer a switch) would look better here because it'd emphasize that those are always mutually exclusive. Minor thing though given this part is trivial
web/src/lib/components/asset-viewer/video-viewer/video-native-viewer.svelte
Show resolved
Hide resolved
web/src/lib/components/asset-viewer/video-viewer/video-native-viewer.svelte
Outdated
Show resolved
Hide resolved
Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
|
Hey Min, going to close this for now as it's gone stale. If you do continue to work on it, feel free to open the PR again! |
Description
Use the vidstack.io player for the large asset-viewer. The existing native video player for web works ok on desktop, but isn't great on mobile-web, particularly for iOS. The native controls overlap the navigation elements, and the swipe left/right behavior doesn't work.
The vidstack.io is a continuation of the popular https://plyr.io/ player.
This is more of a POC, and to provoke some discussion.
The vidstack API is largely the same as the native video element (it wraps it). The initial commit to this PR just maintains existing functionality. The base function does add google cast support (if detected) as well as airplay (if detected) and picture-in-picture controls. Additionally, it is fully keyboard accessible, and also supports changing playback speed. This is all there out of the box.
With additional work, thumbnails could be generated for the video scrub bar, so you can see a preview of the video while scrubbing. And of course, you can totally customize all the icons/colors/etc if you wanted to.
Will add the preview label to this - play around on both desktop/mobile and see what you think.