add video

src/apis/index.php

@@ -71,6 +71,7 @@ switch($_GET['query']) {
         }
       } else if($_GET['type'] == 'works') {
         $item->type = $re['type'];
+        $item->videos = $re['videos'];
         $item->exhibitions = array();
         $qx = mysqli_query($conn,"SELECT id,title FROM `exhibitions` WHERE id IN (".$re['exhibitions'].")");
         while($re = mysqli_fetch_array($qx)) {

src/app/detail/detail.component.html

@@ -12,6 +12,23 @@
       </div>
 
       <div class="text" [innerHTML]="details.content"></div>
+
+      <div class="row videos" *ngIf="details.videos && details.videos.length">
+        <div class="col-12" *ngFor="let video of details.videos"
+             [ngClass]="{'col-md-6': details.videos.length < 4 && (details.videos.length % 3) == 2,
+                          'col-md-12': details.videos.length < 4 && (details.videos.length % 3) == 1,
+                          'col-md-4': details.videos.length >= 3}">
+          <span class="video-title">{{video.title}}</span>
+          <div class="youtube" *ngIf="video.type == 'youtube'">
+          {{video.code}}
+            <iframe class="iframe" [src]="video.embed"
+                    frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowfullscreen></iframe>
+          </div>
+        </div>
+      </div>
+
+
       <span class="tags" *ngIf="details.tags"><b>Tags:</b> {{details.tags}}</span>
 
       <span class="links" *ngIf="details.exhibitions && details.exhibitions.length"><b>Exhibitions:</b>

src/app/detail/detail.component.scss

@@ -43,6 +43,27 @@
       }
     }
 
+    .videos {
+      .video-title {
+        font-size: $font-18;
+        font-weight: bold;
+        padding-bottom: 5px;
+      }
+
+      .youtube {
+        position: relative;
+        padding-bottom: 56.25%;
+
+        .iframe{
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+
     .tags,
     .links {
       display: block;

src/app/detail/detail.component.ts

@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core'
 import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
+import { DomSanitizer } from '@angular/platform-browser'
 import { Location } from '@angular/common'
 import { ApisService } from '../services/apis.service'
 
@@ -19,7 +20,8 @@ export class DetailComponent implements OnInit {
     private apisService: ApisService,
     private router: Router,
     private location: Location,
-    private activeRoute: ActivatedRoute
+    private activeRoute: ActivatedRoute,
+    private sanitizer: DomSanitizer
   ) { }
 
   ngOnInit(): void {
@@ -33,7 +35,16 @@ export class DetailComponent implements OnInit {
       if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
         this.history.push(`/detail/${section}/${id}`)
       }
-      this.details = response.item
+
+      const detail = response.item
+      detail.videos = detail.videos ? JSON.parse(detail.videos) : []
+      detail.videos.forEach((e) => {
+        e.code = e.url.split('/').pop()
+        e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
+      })
+      this.details = detail
+      console.log(response.item)
+
     },(error) => {
       console.error('getPortfolio ERROR', error)
     }).catch((e) => {