Video Vimeo Player

package-lock.json

@@ -1807,6 +1807,15 @@
         }
       }
     },
+    "@vimeo/player": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/@vimeo/player/-/player-2.14.1.tgz",
+      "integrity": "sha512-PXIATVxUfblTbRoSXzNcplJFjsho6e32ltfEm4po/RFZcAOYefOO4mjxDMGUTAzo937DZvjd5n1u7+EfGHuLPw==",
+      "requires": {
+        "native-promise-only": "0.8.1",
+        "weakmap-polyfill": "2.0.1"
+      }
+    },
     "@webassemblyjs/ast": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.9.0.tgz",
@@ -7873,6 +7882,11 @@
         "to-regex": "^3.0.1"
       }
     },
+    "native-promise-only": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/native-promise-only/-/native-promise-only-0.8.1.tgz",
+      "integrity": "sha1-IKMYwwy0X3H+et+/eyHJnBRy7xE="
+    },
     "native-request": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.0.8.tgz",
@@ -12944,6 +12958,11 @@
         "defaults": "^1.0.3"
       }
     },
+    "weakmap-polyfill": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/weakmap-polyfill/-/weakmap-polyfill-2.0.1.tgz",
+      "integrity": "sha512-Jy177Lvb1LCrPQDWJsXyyqf4eOhcdvQHFGoCqSv921kVF5i42MVbr4e2WEwetuTLBn1NX0IhPzTmMu0N3cURqQ=="
+    },
     "webdriver-js-extender": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz",

package.json

@@ -19,9 +19,9 @@
     "@angular/platform-browser": "~10.2.1",
     "@angular/platform-browser-dynamic": "~10.2.1",
     "@angular/router": "~10.2.1",
+    "@vimeo/player": "^2.14.1",
     "rxjs": "~6.6.3",
     "tslib": "^2.0.0",
-    "vimeo": "^2.1.1",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

src/app/app.component.ts

@@ -29,19 +29,19 @@ export class AppComponent {
   title = 'beire-frontend';
 
   ngOnInit() {
-    var $ = document.getElementById.bind(document);
-
-    var orientKey = 'orientation';
-    if ('mozOrientation' in screen) {
-      orientKey = 'mozOrientation';
-    } else if ('msOrientation' in screen) {
-      orientKey = 'msOrientation';
-    }
-
-    var promise = null;
-    if (screen[orientKey].lock) {  promise = screen[orientKey].lock('landscape-primary'); }
+    // var $ = document.getElementById.bind(document);
+    //
+    // var orientKey = 'orientation';
+    // if ('mozOrientation' in screen) {
+    //   orientKey = 'mozOrientation';
+    // } else if ('msOrientation' in screen) {
+    //   orientKey = 'msOrientation';
+    // }
+    //
+    // var promise = null;
+    // if (screen[orientKey].lock) {  promise = screen[orientKey].lock('landscape-primary'); }
     // lockedAllowed = window.screen.lockOrientation(orientation);
 
-    document.documentElement.requestFullscreen();
+    // document.documentElement.requestFullscreen();
   }
 }

src/app/slide/slide.component.html

@@ -26,3 +26,7 @@
  <span class="audioElement audioTimer" *ngIf="currentTime && duration!='00:00'">{{currentTime}}<ng-container *ngIf="duration!='00:00'">/{{duration}}</ng-container></span>
  <span class="audioElement"[innerHTML]="audio_title"></span>
 </div>
+
+<div class="video-player" [ngStyle]="{'display':showVideo }" (click)="stopVideo()">
+  <div id="video-player-content"></div>
+</div>

src/app/slide/slide.component.scss

@@ -85,3 +85,16 @@ div.footer {
 div.menu {
   margin-left:95vw;z-index:200;cursor:pointer;
 }
+
+
+div.video-player {
+  position:absolute;
+  width:100vw;
+  height:100vh;
+  z-index:300;
+  align-items: center;
+  display:flex;
+  background:rgba(0,0,0,0.5);
+  top:0;
+  * { margin:auto;}
+}

src/app/slide/slide.component.ts

@@ -1,9 +1,11 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { ClientService } from '../client.service';
 import { Observable } from 'rxjs';
 import {environment} from '../../environments/environment';
 import { ActivatedRoute, Router } from '@angular/router';
 import { PlayerService } from '../player.service';
+import Player from '@vimeo/player';
+
 
 @Component({
   selector: 'app-slide',
@@ -20,6 +22,12 @@ export class SlideComponent implements OnInit {
   currentTime=""
   audio_title="Streaming from Beire"
 
+  /* video player */
+  showVideo = "none";
+  videoPlayer:any;
+  _videoID:string;
+  //@ViewChild('vimeoPlayer') vimeoPlayer: ElementRef;
+
   constructor(
     private clientService:ClientService,
     private route: ActivatedRoute,
@@ -63,6 +71,29 @@ export class SlideComponent implements OnInit {
 
   }
 
+  getVideoId():string {
+    return this._videoID;
+  }
+
+  showVideoVimeo(id:string) {
+
+    var options = {loop: false, id: id};
+
+    if (this.videoPlayer && this.getVideoId() != id) { this.videoPlayer = this.videoPlayer.destroy();}
+
+    this.videoPlayer = new Player('video-player-content', options);
+    this.showVideo = "flex"
+    this.videoPlayer.on('play', () => { this._videoID = id});
+    this.videoPlayer.on('ended', () => { this.stopVideo(); });
+  }
+
+  stopVideo() {
+      this.videoPlayer.pause().then( () => {
+        this.mute(); //unmute
+        this.showVideo = "none";
+      });
+  }
+
   getFeaturedImage(): string {
     return environment.uriAPI+"items/"+this.slide.name+"/"+this.slide.featuredImage;
   }
@@ -102,8 +133,12 @@ export class SlideComponent implements OnInit {
   }
 
   playUrl() {
+    /* stop audio */
     if (this.slide.title === this.audio_title) { this.playerService.playList() }
-    if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
+    /* playVideo */
+    if (this.slide.featuredVideo) { this.mute(); this.showVideoVimeo(this.slide.featuredVideo); }
+    /* playAudio */
+    else if (this.slide.featuredAudio) { this.playerService.playUrl(this.slide.featuredAudio, this.slide.title); }
   }
 
 }