ContentDetailComponent

Author: jsfrocha

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

@@ -6,5 +6,24 @@
   backUrl="/conteudo"
 ></t4e-page-header>
 <section class="t4e-content-item">
-  <t4e-media-player *ngIf="contentItem.videoUrl" [videoUrl]="contentItem.videoUrl"></t4e-media-player>
+  <div class="content__media-player">
+    <t4e-media-player
+      *ngIf="contentItem.videoUrl"
+      [videoUrl]="contentItem.videoUrl"
+      [videoPoster]="getVideoPoster()"
+    ></t4e-media-player>
+  </div>
+  <div class="content__info">
+    <div class="block" *ngFor="let block of contentInfoBlocks">
+      <div class="block__title">{{block.title}}</div>
+      <div class="block__value">{{block.value}}</div>
+    </div>
+  </div>
+  <div class="content__text">
+    <div class="title" *ngIf="contentItem.type === 'CONTENT-TUTORIAL-VIDEO'">DESCRITIVO</div>
+    <div class="text" [innerHTML]="contentItem.text"></div>
+  </div>
+  <div class="content__tags">
+
+  </div>
 </section>

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

@@ -1,3 +1,76 @@
+@import 'theme';
+
 .t4e-content-item {
-  margin-top: 60px;
+  @include containerPadding();
+  max-width: 1280px;
+  margin: 60px auto 0;
+
+  .content {
+    &__media-player {
+      margin-bottom: 60px;
+    }
+
+    &__info {
+      display: flex;
+      margin-left: 90px;
+      margin-right: 90px;
+      margin-bottom: 40px;
+
+      @include media-laptop {
+        margin-left: 45px;
+        margin-right: 45px;
+      }
+
+      @include media-tablet {
+        margin-right: 0;
+        margin-left: 0;
+      }
+
+      .block {
+        margin-right: 80px;
+
+        @include media-tablet {
+          margin-right: 24px;
+        }
+
+        &__title {
+          @include font('title2', 130%);
+          color: $color-text-blue;
+        }
+
+        &__value {
+          @include font('bodyTextLarge');
+          color: $color-primary-blue;
+        }
+      }
+    }
+
+    &__text {
+      margin-left: 90px;
+      margin-right: 90px;
+
+      @include media-laptop {
+        margin-left: 45px;
+        margin-right: 45px;
+      }
+
+      @include media-tablet {
+        margin-right: 0;
+        margin-left: 0;
+      }
+
+      .title {
+        @include font('title2', 130%);
+        color: $color-text-blue;
+      }
+
+      .text {
+        @include bodyTextFormatting()
+      }
+    }
+
+    &__tags {
+
+    }
+  }
 }

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

@@ -11,6 +11,7 @@ export class ContentDetailComponent implements OnInit {
 
   contentItem: IContentItem
   loading: boolean;
+  contentInfoBlocks: Array<{ title: string, value: string }> = [];
 
   constructor(
     private route: ActivatedRoute
@@ -20,7 +21,10 @@ export class ContentDetailComponent implements OnInit {
     this.route.data.subscribe(({queryResult}) => {
       this.loading = queryResult.data.loading;
       this.contentItem = queryResult.data.contentItem;
+      this.contentInfoBlocks = this.getContentInfoBlocks();
     })
+
+
   }
   getBackgroundHeader(): string {
     if (this.contentItem.stakeholder) {
@@ -33,10 +37,66 @@ export class ContentDetailComponent implements OnInit {
 
         case 'PAIS':
           return 'assets/pages/content-detail/pais-header-bg.png';
+
+        default:
+          return '';
       }
     } else {
       return 'assets/pages/content-detail/generic-header-bg.png';
     }
   }
 
+  getVideoPoster(): string {
+    if (this.contentItem.stakeholder) {
+      switch (this.contentItem.stakeholder.code) {
+        case 'PROFESSOR':
+          return 'assets/pages/content-detail/professor-video-poster.png';
+
+        case 'ALUNO':
+          return 'assets/pages/content-detail/aluno-video-poster.png';
+
+        case 'PAIS':
+          return 'assets/pages/content-detail/pais-video-poster.png';
+
+        default:
+          return '';
+      }
+    } else {
+      return '';
+    }
+  }
+
+  getReadingTime() {
+    const WORDS_PER_MINUTE = 223;
+    const wordCount = this.contentItem.text.split(' ').length;
+    const readingTime = wordCount / WORDS_PER_MINUTE;
+
+    return readingTime.toFixed(0);
+  }
+
+  getContentInfoBlocks(): Array<{ title: string, value: string }> {
+    let infoBlocks = [];
+
+    console.log('type', this.contentItem.type)
+
+    switch(this.contentItem.type) {
+      case 'CONTENT-TUTORIAL-VIDEO':
+        infoBlocks.push({ title: 'Conteúdo', value: 'Vídeo' })
+        infoBlocks.push({ title: 'Duração', value: this.contentItem.videoTime + ' min' })
+        infoBlocks.push({ title: 'Plataforma', value: this.contentItem.provider.title })
+        break;
+      case 'CONTENT-ARTICLE':
+        infoBlocks.push({ title: 'Conteúdo', value: 'Artigo' })
+        infoBlocks.push({ title: 'Tempo Leitura', value: this.getReadingTime() })
+        infoBlocks.push({ title: 'Temática', value: this.contentItem.tags[0].title })
+        break;
+      default:
+        return infoBlocks;
+    }
+
+    return infoBlocks;
+  }
+
+
+
 }

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

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

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

@@ -8,6 +8,7 @@
   justify-content: center;
   align-items: flex-start;
   overflow: hidden;
+  position: relative;
 
   ::ng-deep .mejs__mediaelement,
   .mejs__poster {

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

@@ -12,6 +12,8 @@ declare const MediaElementPlayer: any;
 export class MediaPlayerComponent implements OnInit, OnChanges {
 
   @Input() videoUrl: string;
+  @Input() videoPoster: string;
+
   @ViewChild('mediaPlayerElement') mediaPlayerElement: ElementRef
 
   mediaPlayer: any;

src/assets/pages/content-detail/aluno-video-poster.png

@@ -147,3 +147,53 @@
     max-width: 95%;
   }
 }
+
+@mixin bodyTextFormatting() {
+  h1 {
+
+  }
+
+  h2 {
+
+  }
+
+  h3 {
+
+  }
+
+  h4 {
+
+  }
+
+  h5 {
+
+  }
+
+  h6 {
+
+  }
+
+  blockquote {
+
+  }
+
+  pre {
+
+  }
+
+  figure {
+
+  }
+
+  ul {
+
+  }
+
+  ol {
+
+  }
+
+  li {
+
+  }
+}