feat: add mediaelement video player

angular.json

@@ -35,11 +35,13 @@
             "styles": [
               "node_modules/bootstrap/dist/css/bootstrap.css",
               "node_modules/font-awesome/scss/font-awesome.scss",
+              "node_modules/mediaelement/build/mediaelementplayer.css",
               "src/styles.scss"
             ],
             "scripts": [
               "node_modules/bootstrap/dist/js/bootstrap.js",
-              "node_modules/moment/min/moment-with-locales.js"
+              "node_modules/moment/min/moment-with-locales.js",
+              "node_modules/mediaelement/build/mediaelement-and-player.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,

package.json

@@ -48,7 +48,7 @@
     "bootstrap": "5.3.3",
     "calendar-link": "2.6.0",
     "core-js": "3.8.3",
-    "mobile-detect": "1.4.5",
+    "mediaelement": "^7.0.7",
     "moment": "2.30.1",
     "ngx-clipboard": "16.0.0",
     "ngx-toastr": "^19.0.0",

src/app/app.module.ts

@@ -79,6 +79,7 @@ import {SignLanguageComponent} from "./sign-language/sign-language.component";
 import {TimeInputDirective} from "./shared/directives/time-input.directive";
 import {provideToastr, ToastrModule} from "ngx-toastr";
 import {BrowserAnimationsModule, provideAnimations} from "@angular/platform-browser/animations";
+import 'mediaelement';
 
 export const appRoutes: Routes = [
   {path: 'home', component: HomeComponent, title: environment.title},

src/app/shared/components/mediaelement-player/mediaelement-player.component.scss

@@ -0,0 +1,79 @@
+@import "src/default";
+
+:host ::ng-deep {
+  .mejs__container,
+  .mejs__time-total,
+  .mejs__time-slider {
+    @include focus-outline;
+
+    .mejs__controls {
+      button,
+      .mejs__time-slider {
+        outline-offset: .25rem;
+      }
+    }
+  }
+
+  // increase size
+  .mejs__controls {
+    height: 3.5rem;
+
+    & > div {
+      height: 3.5rem;
+      width: 3rem;
+    }
+
+    button {
+      width: 36px;
+      height: 36px;
+
+      svg {
+        width: 36px;
+        height: 36px;
+      }
+    }
+
+    .mejs__time {
+      height: 1.875rem;
+      font-size: 1rem;
+      padding: 1.5rem .375rem 0;
+    }
+
+    .mejs__time-rail {
+      padding-top: 1rem;
+
+      .mejs__time-total {
+        &, span {
+          height: 1rem;
+        }
+      }
+    }
+
+    .mejs__time-rail:hover .mejs__time-handle-content {
+      transform: scale(1.25);
+      width: 1rem;
+      background-color: white;
+    }
+  }
+
+  // move controls under video
+  .mejs__container:not(.mejs__container-fullscreen ) {
+    margin-bottom: 3.5rem;
+
+    .mejs__controls {
+      bottom: -3.5rem;
+      opacity: 1 !important;
+
+      // don't hide while playing
+      &.mejs__offscreen {
+        clip: auto !important;
+        clip-path: none !important;
+      }
+    }
+  }
+
+  // better contrast
+  .mejs__controls:not([style*="display: none"]) {
+    background: $dark-gray;
+  }
+}

src/app/shared/components/mediaelement-player/mediaelement-player.component.ts

@@ -0,0 +1,45 @@
+import {AfterViewInit, Component, ElementRef, input, OnDestroy, ViewChild} from '@angular/core';
+import {SanitizeUrlPipe} from "../../pipes/sanitize-url.pipe";
+
+declare var MediaElementPlayer: any;
+
+@Component({
+  selector: 'app-mediaelement-player',
+  standalone: true,
+  imports: [
+    SanitizeUrlPipe
+  ],
+  template: `
+    <div class="video-player">
+      @if (src) {
+        <video
+          #mediaElem
+          [title]="title()"
+          [src]="src() | sanitizeUrl"
+          preload="auto"
+        ></video>
+      }
+    </div>
+  `,
+  styleUrl: 'mediaelement-player.component.scss'
+})
+
+export class MediaelementPlayerComponent implements AfterViewInit, OnDestroy {
+  src = input.required<string>();
+  title = input<string>('');
+  @ViewChild('mediaElem') mediaElement: ElementRef;
+  player: any;
+
+  ngAfterViewInit() {
+    this.player = new MediaElementPlayer(this.mediaElement.nativeElement, {
+      // order is important - items will display in the control bar
+      features: ['playpause', 'current', 'progress', 'duration', 'fullscreen'],
+      iconSprite: 'assets/ext/mejs-controls.svg',
+      stretching: 'responsive',
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.player.remove();
+  }
+}