Merge pull request #263 from e-picsa/ft-video-playback

(video-player) Playback service and storage

libs/shared/src/features/video-player/index.ts

@@ -2,11 +2,12 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
 
 import { VideoPlayerComponent } from './video-player.component';
 
 @NgModule({
-  imports: [CommonModule, MatButtonModule, MatIconModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, MatProgressBarModule],
   exports: [VideoPlayerComponent],
   declarations: [VideoPlayerComponent],
   providers: [],

libs/shared/src/features/video-player/schema/index.ts

@@ -0,0 +1,12 @@
+import * as schema from './schema_v0';
+
+// Re-export schema to provide latest version without need to refactor additonal code
+
+export const COLLECTION = schema.COLLECTION_V0;
+export type IVideoPlayerEntry = schema.IVideoPlayerEntry_V0;
+export const SCHEMA = schema.SCHEMA_V0;
+
+// Ensure blank templates always recreated from scratch
+export const ENTRY_TEMPLATE = schema.ENTRY_TEMPLATE_V0;
+
+export const COLLECTION_NAME = 'video_player';

libs/shared/src/features/video-player/schema/schema_v0.ts

@@ -0,0 +1,46 @@
+import { RxJsonSchema } from 'rxdb';
+
+import type { IPicsaCollectionCreator } from '../../../services/core/db_v2/models/index';
+
+const SCHEMA_VERSION = 0;
+
+export interface IVideoPlayerEntry_V0 {
+  videoId: string;
+  currentTime: number;
+  totalTime: number;
+  playbackPercentage: number;
+}
+
+export const ENTRY_TEMPLATE_V0: (videoId: string) => IVideoPlayerEntry_V0 = (videoId) => ({
+  videoId,
+  currentTime: 0,
+  totalTime: 0,
+  playbackPercentage: 0,
+});
+
+export const SCHEMA_V0: RxJsonSchema<IVideoPlayerEntry_V0> = {
+  title: 'video playback schema',
+  version: SCHEMA_VERSION,
+  type: 'object',
+  primaryKey: 'videoId',
+  properties: {
+    videoId: {
+      type: 'string',
+    },
+    currentTime: {
+      type: 'number',
+    },
+    totalTime: {
+      type: 'number',
+    },
+    playbackPercentage: {
+      type: 'number',
+    },
+  },
+  required: ['videoId', 'currentTime', 'totalTime', 'playbackPercentage'],
+};
+
+export const COLLECTION_V0: IPicsaCollectionCreator<IVideoPlayerEntry_V0> = {
+  schema: SCHEMA_V0,
+  isUserCollection: true,
+};

libs/shared/src/features/video-player/video-player.component.html

@@ -1,6 +1,18 @@
-<div class="placeholder" [id]="playerId" #playerEl slot="fixed">
-  <div *ngIf="thumbnail" class="thumbnail" [style.background-image]="'url(' + thumbnail + ')'"></div>
-  <button *ngIf="showPlayButton" mat-fab color="primary" class="play-button" (click)="playVideo()" [disabled]="!source">
-    <mat-icon>play_arrow</mat-icon>
-  </button>
+<div class="placeholderContainer">
+  <div class="placeholder" [id]="playerId" #playerEl slot="fixed">
+    <div *ngIf="thumbnail" class="thumbnail" [style.background-image]="'url(' + thumbnail + ')'"></div>
+    <button
+      *ngIf="showPlayButton"
+      mat-fab
+      color="primary"
+      class="play-button"
+      (click)="playVideo()"
+      [disabled]="!source"
+    >
+      <mat-icon>play_arrow</mat-icon>
+    </button>
+  </div>
+  <div *ngIf="playbackPercentage > 0 && showPlayButton" class="progress-bar">
+    <mat-progress-bar mode="determinate" [value]="playbackPercentage"></mat-progress-bar>
+  </div>
 </div>

libs/shared/src/features/video-player/video-player.component.scss

@@ -15,6 +15,12 @@ $playerWidth: 854px;
     margin-right: -1rem;
   }
 }
+.placeholderContainer {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  margin-bottom: 2rem;
+}
 .placeholder,
 .thumbnail {
   width: 100%;
@@ -23,7 +29,6 @@ $playerWidth: 854px;
 }
 .placeholder {
   position: relative;
-  margin-bottom: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,3 +69,8 @@ $icon-size: 3rem;
   background: #ffffff;
   color: var(--color-warn);
 }
+.progress-bar {
+  position: relative;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.25);
+}