Install MediaElementPlayer;

MediaPlayerComponent;

Author: jsfrocha

angular.json

@@ -30,9 +30,14 @@
             "styles": [
               "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
               "node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
+              "node_modules/mediaelement/build/mediaelementplayer.min.css",
               "src/styles.scss"
             ],
-            "scripts": [],
+            "scripts": [
+              "node_modules/mediaelement/build/mediaelement-and-player.min.js",
+              "node_modules/mediaelement-plugins/dist/airplay/airplay.min.js",
+              "node_modules/mediaelement-plugins/dist/chromecast/chromecast.min.js"
+            ],
             "stylePreprocessorOptions": {
               "includePaths": [
                 "./src"

package-lock.json

@@ -12,9 +12,11 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "~9.1.1",
+    "@angular/cdk": "^9.2.1",
     "@angular/common": "~9.1.1",
     "@angular/compiler": "~9.1.1",
     "@angular/core": "~9.1.1",
+    "@angular/flex-layout": "^9.0.0-beta.29",
     "@angular/forms": "~9.1.1",
     "@angular/platform-browser": "~9.1.1",
     "@angular/platform-browser-dynamic": "~9.1.1",
@@ -26,6 +28,8 @@
     "apollo-link": "^1.2.11",
     "graphql": "^14.6.0",
     "graphql-tag": "^2.10.0",
+    "mediaelement": "^4.2.16",
+    "mediaelement-plugins": "^2.5.1",
     "ngx-owl-carousel-o": "^3.0.0",
     "ngx-skeleton-loader": "^1.2.7",
     "rxjs": "~6.5.4",

package.json

@@ -1 +1,10 @@
-<p>content-detail works!</p>
+<t4e-page-header
+  isInnerPage="true"
+  [backgroundImage]="getBackgroundHeader()"
+  [title]="contentItem.title"
+  backLabel="< VOLTAR PARA CONTEÚDOS"
+  backUrl="/conteudo"
+></t4e-page-header>
+<section class="t4e-content-item">
+  <t4e-media-player *ngIf="contentItem.videoUrl" [videoUrl]="contentItem.videoUrl"></t4e-media-player>
+</section>

src/app/screens/content-detail/content-detail.component.html

@@ -0,0 +1,3 @@
+.t4e-content-item {
+  margin-top: 60px;
+}

src/app/screens/content-detail/content-detail.component.scss

@@ -22,5 +22,21 @@ export class ContentDetailComponent implements OnInit {
       this.contentItem = queryResult.data.contentItem;
     })
   }
+  getBackgroundHeader(): string {
+    if (this.contentItem.stakeholder) {
+      switch(this.contentItem.stakeholder.code) {
+        case 'PROFESSOR':
+          return 'assets/pages/content-detail/professor-header-bg.png';
+
+        case 'ALUNO':
+          return 'assets/pages/content-detail/aluno-header-bg.png';
+
+        case 'PAIS':
+          return 'assets/pages/content-detail/pais-header-bg.png';
+      }
+    } else {
+      return 'assets/pages/content-detail/generic-header-bg.png';
+    }
+  }
 
 }

src/app/screens/content-detail/content-detail.component.ts

@@ -0,0 +1,3 @@
+<div class="t4e-media-player">
+  <video #mediaPlayerElement  preload="auto" style="width:100%;height:100%;" controls="controls" ></video>
+</div>

src/app/shared/components/media-player/media-player.component.html

@@ -0,0 +1,55 @@
+.t4e-media-player {
+  width: 100%;
+  /* max-width: 10px; */
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: hidden;
+
+  ::ng-deep .mejs__mediaelement,
+  .mejs__poster {
+    mask-image: url(/assets/pages/content-detail/video-mask.png);
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: cover;
+    mask-border-slice: 20px;
+  }
+
+  ::ng-deep .mejs__container-fullscreen .mejs__mediaelement {
+    mask-image: none;
+  }
+
+  ::ng-deep .mejs__container-fullscreen .mejs__mediaelement video {
+    //width: auto !important;
+    //height: 100vh !important;
+  }
+
+  ::ng-deep .mejs__controls:not([style*="display: none"]) {
+    background: transparent;
+    margin-bottom: 24px;
+    padding: 0 30px;
+  }
+  ::ng-deep .mejs__container {
+    background: #fff;
+    font-family: Helvetica, Arial, serif;
+    position: relative;
+    text-align: left;
+    text-indent: 0;
+    vertical-align: top;
+  }
+
+  ::ng-deep .mejs__overlay {
+    border-radius: 40px;
+    //background: linear-gradient(0deg, rgba(123, 201, 80, 0.7) 0%, rgba(123, 201, 80, 0) 23.58%)
+  }
+
+  video {
+    width: 100% !important;
+    height: auto !important;
+    display: flex;
+    flex: 1 1 100%;
+  }
+}

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MediaPlayerComponent } from './media-player.component';
+
+describe('MediaPlayerComponent', () => {
+  let component: MediaPlayerComponent;
+  let fixture: ComponentFixture<MediaPlayerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MediaPlayerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MediaPlayerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/components/media-player/media-player.component.spec.ts

@@ -0,0 +1,70 @@
+import {Component, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild} from '@angular/core';
+import { MediaObserver } from '@angular/flex-layout';
+import {fromEvent} from 'rxjs';
+import {auditTime} from 'rxjs/operators';
+declare const MediaElementPlayer: any;
+
+@Component({
+  selector: 't4e-media-player',
+  templateUrl: './media-player.component.html',
+  styleUrls: ['./media-player.component.scss']
+})
+export class MediaPlayerComponent implements OnInit, OnChanges {
+
+  @Input() videoUrl: string;
+  @ViewChild('mediaPlayerElement') mediaPlayerElement: ElementRef
+
+  mediaPlayer: any;
+
+  width: number = 1054;
+  height: number = this.width / 1.77;
+
+  constructor(
+    public mediaObserver: MediaObserver,
+    private renderer: Renderer2
+  ) {
+    mediaObserver.media$.subscribe(el => {
+      this.width = Number(el.mediaQuery.split('max-width:')[1].split('px)')[0])
+      console.log('width', this.width);
+    })
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.videoUrl) {
+      setTimeout(() => {
+        this.loader()
+        console.log('videoUrl', this.videoUrl)
+      }, 0);
+    }
+  }
+
+  loader() {
+    this.loadMediaPlayer();
+    fromEvent(window, "resize")
+      .pipe(auditTime(100))
+      .subscribe((event: any) => {
+        this.width = event['target'].innerWidth
+        this.height = event['target'].innerHeight;
+        this.renderer.setAttribute(this.mediaPlayerElement.nativeElement,'width', this.width.toString())
+        this.renderer.setAttribute(this.mediaPlayerElement.nativeElement,'height', (this.width / 1.77 ).toString())
+        console.log(this.width)
+      });
+  }
+
+  loadMediaPlayer() {
+    this.mediaPlayer = new MediaElementPlayer(
+      this.mediaPlayerElement.nativeElement, {
+        autoSize: true,
+        features: ['playpause', 'current', 'progress', 'duration', 'volume', 'fullscreen', 'airplay', 'chromecast']
+      }
+    );
+    this.mediaPlayer.setSrc(this.videoUrl);
+    this.mediaPlayer.load();
+    // const video = this.mediaPlayerElement.nativeElement;
+    // setTimeout(() => {}, 300);
+  }
+
+}

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

@@ -29,6 +29,11 @@
       @include font('button');
       color: #FFF;
       margin-bottom: 16px;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
     }
 
     h1 {

src/app/shared/components/page-header/page-header.component.scss

@@ -11,6 +11,7 @@ import {ReactiveFormsModule} from '@angular/forms';
 import { ContentCardComponent } from './components/content-card/content-card.component';
 import { FilterDrawerComponent } from './components/filter-drawer/filter-drawer.component';
 import {ContentItemsService} from './services/content-items.service';
+import { MediaPlayerComponent } from './components/media-player/media-player.component';
 
 const SHARED_COMPONENTS = [
   NavbarComponent,
@@ -20,6 +21,7 @@ const SHARED_COMPONENTS = [
   FiltersComponent,
   ContentCardComponent,
   FilterDrawerComponent,
+  MediaPlayerComponent
 ];
 
 const SHARED_SERVICES = [