remove iframe

open-template-hub · Sep 3, 2021 · 08915a5 · 08915a5
1 parent 1e16689
commit 08915a5
Show file tree

Hide file tree

Showing 15 changed files with 14 additions and 88 deletions.
diff --git a/src/app/component/common/block/event-data/event-data.component.html b/src/app/component/common/block/event-data/event-data.component.html
@@ -1,6 +1,6 @@
 <div [class.background-color]="isBackgroundColor" [class.centered-title]="centeredTitle" [class.editable]="isEditable"
      [class.is-small-title]="isSmallTitle" [class.not-fixed-height]="notFixedHeight" [class.max-height]="maxHeight"
-     [class.show-calendar]="(showCalendar || isEditable) && !notFixedHeight" [class.video]="containsVideo" [class.rate-height]="rateHeight" class="event">
+     [class.show-calendar]="(showCalendar || isEditable) && !notFixedHeight" [class.rate-height]="rateHeight" class="event">
   <div *ngIf="title" class="event-header">
     <div class="event-header-title" [class.remove-line-clamp]="removeLineClamp">
       <h3 (click)="onClick()" >{{title}}</h3>
@@ -52,7 +52,7 @@ <h4 *ngIf="date">{{timeItem}}</h4>
       <label class="far fa-sm fa-star" [for]="'star1' + id"></label>
     </div>
     <!--END OF RATE-->
-    <div class="event-description" [class.remove-line-clamp]="removeLineClamp" [class.video]="containsVideo"
+    <div class="event-description" [class.remove-line-clamp]="removeLineClamp"
          [class.add-margin-to-description]="addMarginToDescription">
       {{description}}
     </div>

diff --git a/src/app/component/common/block/event-data/event-data.component.scss b/src/app/component/common/block/event-data/event-data.component.scss
@@ -6,10 +6,6 @@
   padding: 0 1em 0;
 }
 
-.event.video {
-  height: 320px;
-}
-
 .event.not-fixed-height {
   height: auto;
 }
@@ -90,10 +86,6 @@
   -webkit-box-orient: vertical;
 }
 
-.event-description.video {
-  -webkit-line-clamp: 3;
-}
-
 .event-description.remove-line-clamp, .show-calendar .event-description.remove-line-clamp {
   -webkit-line-clamp: initial;
 }
@@ -102,7 +94,7 @@
   -webkit-line-clamp: 3; /* number of lines to show */
 }
 
-.show-calendar .event-description.video {
+.show-calendar {
   -webkit-line-clamp: 1;
 
 }

diff --git a/src/app/component/common/block/event-data/event-data.component.ts b/src/app/component/common/block/event-data/event-data.component.ts
@@ -43,7 +43,6 @@ export class EventDataComponent implements OnInit {
   @Input() isPublicPage = false;
   @Input() notFixedHeight = false;
   @Input() maxHeight = false;
-  @Input() containsVideo = false;
   @Input() addMarginToDescription = false;
   @Input() centeredTitle = false;
   @Input() ribbon = { text: '', type: '' };

diff --git a/src/app/component/common/card/card1/card1.component.html b/src/app/component/common/card/card1/card1.component.html
@@ -30,8 +30,7 @@ <h3>{{title}}</h3>
   </div>
 
   <div *ngIf="enableHeader && enableHeaderFullImg"
-       class="card1-header card1-header-img card1-header-full-img rounded-box" [class.max-height]="maxHeight"
-       [class.video]="containsVideo">
+       class="card1-header card1-header-img card1-header-full-img rounded-box" [class.max-height]="maxHeight">
     <ng-content select="[headerFullImg]"></ng-content>
   </div>
 

diff --git a/src/app/component/common/card/card1/card1.component.scss b/src/app/component/common/card/card1/card1.component.scss
@@ -72,14 +72,10 @@
   overflow: hidden;
 }
 
-.card1-header.card1-header-full-img.max-height, .card1-header.card1-header-full-img.max-height.video {
+.card1-header.card1-header-full-img.max-height {
   height: 300px;
 }
 
-.card1-header.card1-header-full-img.video {
-  height: 176px;
-}
-
 .card1-header h1, .card1-header h2, .card1-header h3, .card1-header h4, .card1-header h5, .card1-header h6 {
   color: var(--contrast);
 }

diff --git a/src/app/component/common/card/card1/card1.component.ts b/src/app/component/common/card/card1/card1.component.ts
@@ -28,7 +28,6 @@ export class Card1Component {
   @Input() height = undefined;
   @Input() width = undefined;
   @Input() maxHeight = false;
-  @Input() containsVideo = false;
   @Input() ribbon = { text: '', type: '' };
   @Input() isCardContentOverflowVisible = false;
   @Input() topLayer = false;

diff --git a/src/app/component/common/card/event-card/event-card.component.html b/src/app/component/common/card/event-card/event-card.component.html
@@ -2,16 +2,9 @@
   <app-card1 [enableHeaderFullImg]=true [height]="(fillLayout || showRateBar) ? '-webkit-fit-content' : '500px'"
              [paddingContent]="false" [underHeaderProfileImg]="profileImg"
              [ribbon]="event.isPremium ? RIBBONS.premium : event.isFeatured ? RIBBONS.featured : event.isNew ? RIBBONS.new : RIBBONS.default"
-             [width]="fillLayout ? '-webkit-fill-available' : '400px'" [maxHeight]="maxHeight"
-             [containsVideo]="event.payload?.trailerVideoLink" [enableHeader]="!showRateBar">
+             [width]="fillLayout ? '-webkit-fill-available' : '400px'" [maxHeight]="maxHeight" [enableHeader]="!showRateBar">
 
-    <div *ngIf="event.payload?.trailerVideoLink" headerFullImg id=trailer-video>
-      <iframe title="Trailer Video" width="100%" style="height: -webkit-fill-available" [src]="safeYoutubeUrl"
-              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-              allowfullscreen></iframe>
-    </div>
-
-    <div *ngIf="!event.payload?.trailerVideoLink && !showRateBar"
+    <div *ngIf="!showRateBar"
          (click)="routeToEvent()" headerFullImg id=header-img [class.no-hover]="( inProgress || completed )">
       <svg class="gridItem__media" fill="none"
            preserveAspectRatio="xMidYMid slice"
@@ -1645,7 +1638,7 @@
                       [subCategory]="event.payload?.subCategory" [title]="event.title"
                       [notFixedHeight]="fillLayout" [maxHeight]="maxHeight"
                       [addMarginToDescription]="addMarginToDescription"
-                      [centeredTitle]="centeredTitle" [containsVideo]="event.payload?.trailerVideoLink"
+                      [centeredTitle]="centeredTitle"
                       [inProgress]="inProgress" [showHamburgerMenu]="showHamburgerMenu" [showRateBar]="showRateBar"
                       (rateButtonClicked)="rateButtonClicked.emit()" [rateHeight]="showRateBar" [completed]="completed">
       </app-event-data>

diff --git a/src/app/component/common/card/event-card/event-card.component.scss b/src/app/component/common/card/event-card/event-card.component.scss
@@ -3,10 +3,6 @@
   cursor: pointer;
 }
 
-#trailer-video {
-  width: -webkit-fill-available;
-}
-
 @media only screen and (max-width: 999px) {
   #header-img {
     width: 75%;

diff --git a/src/app/component/common/card/event-card/event-card.component.ts b/src/app/component/common/card/event-card/event-card.component.ts
@@ -46,7 +46,6 @@ export class EventCardComponent implements OnInit {
     this.basicInfoService.userInfo.subscribe( userInfo => {
       this.username = userInfo?.username;
     } );
-    this.getUrl()
   }
 
   onClickHeader() {
@@ -64,9 +63,4 @@ export class EventCardComponent implements OnInit {
   emitIdForCompletedButton( event ): void {
     this.markAsCompletedButtonClicked.emit( event );
   }
-
-  getUrl() {
-    this.safeYoutubeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
-      'https://www.youtube.com/embed/' + this.event.payload?.trailerVideoLink );
-  }
 }
diff --git a/src/app/component/common/card/pricing-card/pricing-card.component.html b/src/app/component/common/card/pricing-card/pricing-card.component.html
@@ -3,7 +3,7 @@
              [paddingContent]="false"
              [ribbon]="option.ribbon ? option.ribbon : RIBBONS.default"
              [width]="option.styles.width" [maxHeight]="false"
-             [containsVideo]="false" [enableHeader]="false" [style.font-size]="option.styles.fontSize">
+             [enableHeader]="false" [style.font-size]="option.styles.fontSize">
     <div body class="content-wrapper">
       <p class="subscription-header">{{ option.title }}</p>
       <div class="price-area">

diff --git a/src/app/component/common/card/testimonial-card/testimonial-card.component.html b/src/app/component/common/card/testimonial-card/testimonial-card.component.html
@@ -2,7 +2,7 @@
   <app-card1 [enableHeaderFullImg]="false" [height]="'340px'"
              [paddingContent]="false"
              [width]="'400px'" [maxHeight]="'500px'"
-             [containsVideo]="false" [enableHeader]="false" [topLayer2]="true" [topLayerBackgroundColor]="option.style.themeColor"
+             [enableHeader]="false" [topLayer2]="true" [topLayerBackgroundColor]="option.style.themeColor"
              [topLayerMarginTop]="marginTop" [topLayerMinHeight]="minHeight" [testimonialSizeActive]="true">
     <div body class="content-wrapper">
       <div class="icon-wrapper">

diff --git a/src/app/data/mock/events.ts b/src/app/data/mock/events.ts
@@ -20,7 +20,6 @@ export const showroomEvents = [
       leafCategory:2,
       price:'5.00',
       isCompleted:false,
-      trailerVideoLink: 'GtgdHzLvf4Q'
     },
     __v:0,
     count:5,
@@ -69,7 +68,6 @@ export const showroomEvents = [
       subCategory:4,
       leafCategory:1,
       isCompleted:true,
-      trailerVideoLink:'BM4CHBmAPh4'
     },
     __v:0,
     count:30,
@@ -96,7 +94,6 @@ export const showroomEvents = [
       leafCategory:2,
       price:'5.00',
       isCompleted:false,
-      trailerVideoLink: 'GtgdHzLvf4Q'
     },
     __v:0,
     count:5,
@@ -145,7 +142,6 @@ export const showroomEvents = [
       subCategory:4,
       leafCategory:1,
       isCompleted:true,
-      trailerVideoLink:'BM4CHBmAPh4'
     },
     __v:0,
     count:30,
@@ -175,7 +171,6 @@ export const attendedEventsData = [
       leafCategory:2,
       price:'5.00',
       isCompleted:false,
-      trailerVideoLink: 'GtgdHzLvf4Q'
     },
     __v:0,
     count:5,
@@ -224,7 +219,6 @@ export const attendedEventsData = [
       subCategory:4,
       leafCategory:1,
       isCompleted:true,
-      trailerVideoLink:'BM4CHBmAPh4'
     },
     __v:0,
     count:30,
@@ -251,7 +245,6 @@ export const attendedEventsData = [
       leafCategory:2,
       price:'5.00',
       isCompleted:false,
-      trailerVideoLink: 'GtgdHzLvf4Q'
     },
     __v:0,
     count:5,
@@ -300,7 +293,6 @@ export const attendedEventsData = [
       subCategory:4,
       leafCategory:1,
       isCompleted:true,
-      trailerVideoLink:'BM4CHBmAPh4'
     },
     __v:0,
     count:30,

diff --git a/src/app/page/dashboard-layout/create-event/create-event.component.ts b/src/app/page/dashboard-layout/create-event/create-event.component.ts
@@ -63,8 +63,6 @@ export class CreateEventComponent implements OnInit {
     title: '',
     description: '',
     link: '',
-    trailerVideoLink: '',
-    isTrailerVideoLinkActive: false,
     date: '',
     durationHour: '0',
     durationMin: '45',
@@ -108,9 +106,6 @@ export class CreateEventComponent implements OnInit {
       title: [ this.defaultFormValues.title, Validators.required ],
       description: [ this.defaultFormValues.description, Validators.maxLength( 500 ) ],
       link: [ this.defaultFormValues.link, Validators.pattern( '^.+:\\/\\/.*$' ) ],
-      trailerVideoLink: [ this.defaultFormValues.trailerVideoLink,
-        Validators.pattern( '^(https:\\/\\/www.)?youtube.com/watch\\?v=.{11}$' ) ],
-      isTrailerVideoLinkActive: [ this.defaultFormValues.isTrailerVideoLinkActive ],
       date: [ this.defaultFormValues.date, Validators.required ],
       durationHour: [ this.defaultFormValues.durationHour, Validators.pattern( '^([0-1]?[0-9]|2[0-3])$' ) ],
       durationMin: [ this.defaultFormValues.durationMin, Validators.pattern( '^([0-9]|([0-5][0-9]))$' ) ],
@@ -179,15 +174,6 @@ export class CreateEventComponent implements OnInit {
       this.form.controls.link.setErrors( { incorrect: true } );
     }
 
-    if ( this.form.controls.isTrailerVideoLinkActive.value && this.form.controls.trailerVideoLink.value === '' ) {
-      this.form.controls.trailerVideoLink.setErrors( { incorrect: true } );
-    }
-
-    // mark as valid if the activations not enabled
-    if ( !this.form.controls.isTrailerVideoLinkActive.value ) {
-      this.form.controls.trailerVideoLink.setValue( this.defaultFormValues.trailerVideoLink );
-    }
-
     // for "Premium content cannot be changed to free"
     this.previousPrice = this.form.controls.price.value;
     if ( !this.form.controls.isPremium.value ) {
@@ -200,7 +186,6 @@ export class CreateEventComponent implements OnInit {
       durationMin: 'Please provide a valid duration',
       durationHour: 'Please provide a valid duration',
       link: 'Please provide a valid url (Ex. "https://opentemplatehub.com")',
-      trailerVideoLink: 'Please provide a valid youtube video url (Ex. "https://www.youtube.com/watch?v=11111111111")',
       price: 'Price must be minimum 5.00$'
     };
 
@@ -240,9 +225,6 @@ export class CreateEventComponent implements OnInit {
           title: [ event.title, Validators.required ],
           description: [ event.payload.description, Validators.maxLength( 500 ) ],
           link: [ event.link, Validators.pattern( '^.+:\\/\\/.*$' ) ],
-          trailerVideoLink: [ event.payload.trailerVideoLink ?
-              'https://www.youtube.com/watch?v=' + event.payload.trailerVideoLink : '', Validators.pattern( '^(https:\\/\\/www.)?youtube.com/watch\\?v=.{11}$' ) ],
-          isTrailerVideoLinkActive: [ !!event.payload.trailerVideoLink ],
           date: [ formatDate( new Date( event.date ), 'yyyy/MM/dd HH:mm', 'en-US' ), Validators.required ],
           durationHour: [ Math.floor( event.duration / 60 ).toString(), Validators.pattern( '^([0-1]?[0-9]|2[0-3])$' ) ],
           durationMin: [ ( event.duration % 60 ).toString(), Validators.pattern( '^([0-9]|([0-5][0-9]))$' ) ],
@@ -280,10 +262,6 @@ export class CreateEventComponent implements OnInit {
       payload.price = this.form.controls.price.value;
     }
 
-    if ( this.form.controls.isTrailerVideoLinkActive.value ) {
-      payload.trailerVideoLink = this.form.controls.trailerVideoLink.value.substr( -11, 11 );
-    }
-
     const date = new Date( this.form.controls.date.value );
 
     const event = {

diff --git a/src/app/page/dashboard-layout/create-event/create-event.html b/src/app/page/dashboard-layout/create-event/create-event.html
@@ -60,12 +60,6 @@
               <p style="min-width: 75px; margin-left: 14px;">Duration:</p>
               <i aria-hidden="true" class="fas fa-clock fa-lg fa-fw"></i>
             </div>
-            <div *ngIf="form.controls.isTrailerVideoLinkActive.value"
-                 [class.input-error]="submitted && form.controls.trailerVideoLink.invalid"
-                 class="input-with-icon">
-              <input formControlName="trailerVideoLink" placeholder="Video trailer link..." type="text">
-              <i aria-hidden="true" class="fab fa-youtube fa-lg fa-fw"></i>
-            </div>
             <div *ngIf="form.controls.isPremium.value"
                  [class.input-error]="submitted && form.controls.price.invalid" class="input-with-icon">
               <input formControlName="price" placeholder="Price..." type="text">
@@ -87,12 +81,6 @@
                   <i aria-hidden="true" class="fas fa-crown fa-lg fa-fw"
                      [class.button-active]="form.controls.isPremium.value"></i>
             </span>
-            <span
-                (click)="form.controls.isTrailerVideoLinkActive.setValue( !form.controls.isTrailerVideoLinkActive.value )"
-                class="tooltip" show-delay="500" tooltip="Add Youtube video trailer link">
-                  <i aria-hidden="true" class="fab fa-youtube fa-lg fa-fw"
-                     [class.button-active]="form.controls.isTrailerVideoLinkActive.value"></i>
-            </span>
             <span
                 (click)="form.controls.isDurationActive.setValue( !form.controls.isDurationActive.value )"
                 class="tooltip" show-delay="500" tooltip="Add duration">

diff --git a/src/index.html b/src/index.html
@@ -26,10 +26,10 @@
   <link href='https://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
-  <link href="src/assets/favicons/apple-touch-icon.png" rel="apple-touch-icon">
-  <link href="src/assets/favicons/favicon.png" rel="icon" type="image/x-icon">
-  <link href="src/assets/favicons/site.webmanifest" rel="manifest">
-  <link color="#43b043" href="src/assets/favicons/safari-pinned-tab.svg" rel="mask-icon">
+  <link href="assets/favicons/apple-touch-icon.png" rel="apple-touch-icon">
+  <link href="assets/favicons/favicon.png" rel="icon" type="image/x-icon">
+  <link href="assets/favicons/site.webmanifest" rel="manifest">
+  <link color="#43b043" href="assets/favicons/safari-pinned-tab.svg" rel="mask-icon">
 
   <meta content="assets/favicons/browserconfig.xml" name="msapplication-config"/>
   <meta content="#43b043" name="msapplication-TileColor">