fix galleri path and add embed video

src/app/admin/admin.component.html

@@ -137,6 +137,7 @@
               <select class="input-select" name="videoType" [(ngModel)]="videoType">
                 <option value="youtube">YouTube</option>
                 <option value="vimeo">Vimeo</option>
+                <option value="embed">Embed</option>
               </select>
             </div>
             <div class="w-60 d-inline-block pr-2">

src/app/admin/admin.component.ts

@@ -164,7 +164,7 @@ export class AdminComponent implements OnInit {
   videoAdd(): void {
     this.selectedVideos.push({
       type: this.videoType,
-      url: this.videoURL
+      url: this.videoURL.replace(/\"/g, "\\\"")
     })
     this.videoURL = ''
   }

src/app/detail/detail.component.html

@@ -5,11 +5,11 @@
       <h2 class="title">{{details.title}}</h2>
 
 
-      <div class="row no-gutters gallery" *ngIf="details.gallery && details.gallery.length">
-        <div class="col-12" *ngFor="let image of details.gallery; let i = index"
-             [ngClass]="{'col-md-4': details.gallery.length < 4 && (details.gallery.length % 3) == 2,
-                          'col-md-12': details.gallery.length < 4 && (details.gallery.length % 3) == 1,
-                          'col-md-3': details.gallery.length >= 3}">
+      <div class="row no-gutters gallery" *ngIf="galleryImages.length">
+        <div class="col-12" *ngFor="let image of galleryImages; let i = index"
+             [ngClass]="{'col-md-4': galleryImages.length < 4 && (galleryImages.length % 3) == 2,
+                          'col-md-12': galleryImages.length < 4 && (galleryImages.length % 3) == 1,
+                          'col-md-3': galleryImages.length >= 3}">
           <div class="gallery-container">
             <span class="gallery-title">{{image.title}}</span>
             <img class="image" [src]="basePath+image.url" (click)="openGallery(i)">
@@ -33,11 +33,16 @@
                           '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 class="vimeo" *ngIf="video.type == 'vimeo'">
+            <iframe class="iframe" title="vimeo-player" [src]="video.embed" src="https://player.vimeo.com/video/104753208"
+                    frameborder="0" allowfullscreen></iframe>
+          </div>
+          <div class="embed" *ngIf="video.type == 'embed'" [innerHTML]="video.embed"></div>
+
         </div>
       </div>
 

src/app/detail/detail.component.scss

@@ -82,10 +82,13 @@
         padding-bottom: 5px;
       }
 
-      .youtube {
+      .youtube,
+      .vimeo,
+      .embed {
         position: relative;
         padding-bottom: 56.25%;
 
+        iframe,
         .iframe {
           position: absolute;
           top: 0;

src/app/detail/detail.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild } from '@angular/core'
+import { Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'
 import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
 import { DomSanitizer } from '@angular/platform-browser'
 import { Location } from '@angular/common'
@@ -9,7 +9,8 @@ import { environment } from '../../environments/environment'
 @Component({
   selector: 'app-detail',
   templateUrl: './detail.component.html',
-  styleUrls: ['./detail.component.scss']
+  styleUrls: ['./detail.component.scss'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DetailComponent implements OnInit {
 
@@ -45,6 +46,7 @@ export class DetailComponent implements OnInit {
   }
 
   showDetails(section, id): void {
+    this.galleryImages = []
     this.apisService.getDetails(section, id).toPromise().then((response) => {
       if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
         this.history.push(`/detail/${section}/${id}`)
@@ -54,17 +56,30 @@ export class DetailComponent implements OnInit {
       detail.videos = detail.videos ? JSON.parse(detail.videos) : []
       detail.videos.forEach((e) => {
         e.code = e.url.split('/').pop()
+        switch(e.type) {
+          case 'youtube':
             e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
+            break
+          case 'vimeo':
+            e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${e.code}`)
+            break
+          case 'embed':
+            e.embed = this.sanitizer.bypassSecurityTrustHtml(e.url)
+            break
+        }
       })
+
       detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : []
 
       detail.gallery.forEach((e) => {
+        if(!e.main) {
           this.galleryImages.push({
-          url: e.url,
+            url: `${e.url}`,
             altText: e.title,
             title: e.title,
-          thumbnailUrl: e.url
+            thumbnailUrl: `${this.basePath}${e.url}`
           })
+        }
       })
       this.details = detail
 

src/app/portfolio/portfolio.component.html

@@ -3,7 +3,7 @@
     <div class="row">
       <div class="col-12 col-sm-6 mx-auto" [ngClass]="'col-md-' + ((item.id % 3)+3)" *ngFor="let item of portfolioItems">
         <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)">
-          <img class="image" src="assets/{{item.image}}">
+          <img class="image" [src]="basePath+item.image">
           <div class="text">
             <span class="title">{{item.title}}</span>
             <span class="type" *ngIf="section != 'exhibitions'">{{item.type}}</span>

src/app/portfolio/portfolio.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core'
 import { Router, NavigationEnd } from '@angular/router'
 import { ApisService } from '../services/apis.service'
+import { environment } from '../../environments/environment'
 
 @Component({
   selector: 'app-portfolio',
@@ -9,6 +10,8 @@ import { ApisService } from '../services/apis.service'
 })
 export class PortfolioComponent implements OnInit {
 
+  public basePath = `${environment.BASE_PATH}`
+
   public portfolioItems: any = []
   public section: string = ''