fix embed-video and main list image heights, add embed video author

rolandtoth · Nov 21, 2019 · 1f291de · 1f291de
1 parent b4d9771
commit 1f291de
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 42 deletions.
diff --git a/ng/src/app/shared/embed-video/embed-video.component.html b/ng/src/app/shared/embed-video/embed-video.component.html
@@ -1,9 +1,12 @@
-<div *ngIf="videoData" class="embed-wrap" [ngStyle]="{'width': width + 'px'}">
-  <div [ngStyle]="{'padding-bottom': (videoData.ratio | percent)}">
+<div class="embed-wrap" [ngStyle]="{'width': width + 'px'}" [ngClass]="!videoData?.thumbnail_url ? 'loading' : ''">
+  <div [ngStyle]="{'padding-bottom': (videoData?.ratio | percent)}">
     <img src="{{ videoData.thumbnail_url }}" alt="">
     <span class="play-icon" (click)="replaceImage($event)">
       <svg [outerHTML]="'play-circle' | inlineSvg"></svg>
     </span>
   </div>
-  <p>{{ videoData.title }}</p>
+  <p>
+    <span class="title">{{ videoData?.title }}</span> 
+    <span class="author text-faded"><small>{{ videoData?.author_name }}</small></span>
+  </p>
 </div>
diff --git a/ng/src/app/shared/embed-video/embed-video.component.ts b/ng/src/app/shared/embed-video/embed-video.component.ts
@@ -11,13 +11,16 @@ export class EmbedVideoComponent implements OnInit {
   @Input() width: number
   @Input() height: number
   @Input() autoplay: boolean = true
-  videoData: VideoData
+  videoData: VideoData|{[key: string]: string} = {}
 
   constructor(private videoService: VideoService) {}
 
   ngOnInit() {
+    this.videoData.ratio = 0.75
+
     this.videoService.getVideoData(this.url).subscribe(data => {
-      data.ratio = data.height / data.width
+      // data.ratio = data.height / data.width
+      data.ratio = data.thumbnail_height / data.thumbnail_width
 
       if (this.autoplay) {
         data.html = this.addAutoPlayParam(data.html)

diff --git a/ng/src/app/shared/interfaces/videodata.interface.ts b/ng/src/app/shared/interfaces/videodata.interface.ts
@@ -1,4 +1,5 @@
 export interface VideoData {
+  author_name: string
   width: number
   height: number
   thumbnail_width: number

diff --git a/ng/src/scss/styles.scss b/ng/src/scss/styles.scss
@@ -283,6 +283,18 @@ footer {
       margin-bottom: 1.75rem;
     }
   }
+
+  picture {
+    position: relative;
+    height: 0;
+    padding-top: 66.667%;
+    background: #f8f8f8;
+    img {
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
 }
 
 a.img-hover-effect {
@@ -758,54 +770,72 @@ embed-video {
 
 .embed-wrap {
   max-width: 100%;
-}
 
-.embed-wrap>div {
-  position: relative;
-  height: 0;
-}
+  >div {
+    position: relative;
+    height: 0;
+  }
 
-.embed-wrap p {
-  margin-top: 0.5rem;
-}
+  p {
+    margin-top: 0.5rem;
+    span {
+      display: block;
+    }
+    .author {
+      margin-top: -0.25rem;
+    }
+  }
 
-.embed-wrap iframe,
-.embed-wrap img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  border: none;
-}
+  iframe,
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
 
-.play-icon {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  z-index: 2;
-  display: inline-block;
-  transform: translate3d(-50%, -50%, 0);
-  cursor: pointer;
+  img {
+    background: #f8f8f8;
+  }
 
-  svg {
-    width: 4rem;
-    display: block;
-    height: auto;
+  .play-icon {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 2;
+    display: inline-block;
+    transform: translate3d(-50%, -50%, 0);
+    cursor: pointer;
 
-    * {
-      stroke-width: 0;
-      fill: $plum;
+    svg {
+      width: 4rem;
+      display: block;
+      height: auto;
+
+      * {
+        stroke-width: 0;
+        fill: $plum;
+      }
+
+      polygon {
+        fill: white;
+      }
     }
 
-    polygon {
-      fill: white;
+    &:hover {
+      svg {
+        filter: contrast(1.33);
+      }
     }
   }
 
-  &:hover {
-    svg {
-      filter: contrast(1.33);
+  &.loading {
+    .play-icon {
+      filter: saturate(0);
+      opacity: 0.33;
+      pointer-events: none;
     }
   }
 }