feat(video-player): playback service and storage

[chrismclarke]

Is your feature request related to a problem? Please describe.
Following work on #237 it is now possible for a video to be resumed on native after being closed, however the playback state only persists for as long as the component (so destroyed after page back navigation or app restart).

Instead it would be useful to persist the playback state of all videos across sessions, and provide users indication of which videos have been previously viewed and which are in progress.

Describe the solution you'd like

• Create a video-player.service.ts file to manage main logic for storing and retrieving playback state
• Create a folder in the video-player for schemas and create a database schema to hold video playback information (e.g. video id, current time, total time, playback percentage). Would recommend calling the data table video-playback
• Add data bindings to update db entries from the service when video playback events
• Add ui to show playback progress bar below start button

Additional context
Video player code in libs\shared\src\features\video-player

The video player currently generates a random id for each video played, however it would be good instead pass as an input that can be used to link with the db. E.g. when linking with a video resource the input could allow for the resource.id to be passed

<picsa-video-player [source]="videoUri" [id]="videoResource.id"></picsa-video-player>

Progress bar ui can just be mat-progress-bar, with some extra css to make it sit below the play start button.

Example of creating db schema and using with service can be found in apps\picsa-tools\seasonal-calendar-tool\src\app\schema and apps\picsa-tools\seasonal-calendar-tool\src\app\services\calendar.data.service.ts. Full rxdb docs at https://rxdb.info/rx-schema.html

---

Misc
I also thought it might be a nice enhancement to look into auto-generating thumbnails for videos, although I think probably better as a lower priority follow-up so excluding from here. But just to put some links for research purposes (so I can close some tabs!):

Web

• https://cwestblog.com/2017/05/03/javascript-snippet-get-video-frame-as-an-image/
• https://immanubhardwaj.medium.com/javascript-how-to-capture-image-from-video-ac7dba01a8e7

Native

• https://github.com/dragermrb/capacitor-plugin-video-editor?tab=readme-ov-file#thumbnailoptions
• https://github.com/sultanmyrza/preview-thumbnail/tree/main