From 155ba4ff1dd93527842227f2a6a4a0608db88655 Mon Sep 17 00:00:00 2001
From: Matthieu Benoist <mbenoist@ausy-group.com>
Date: Mon, 14 Jun 2021 11:17:04 +0200
Subject: [PATCH] Parse youtube iframe and replace it by div
---
src/app/app.module.ts | 1 +
.../core/services/tarteaucitron.service.ts | 13 ++++++-
.../services/dataset-detail.service.ts | 2 +-
.../cms-page/cms-page.component.scss | 1 +
.../components/cms-page/cms-page.component.ts | 11 +++++-
.../cms-post-detail.component.ts | 16 +++++---
.../models/cms-content.model.ts | 39 ++++++++++++++++++-
src/scss/ghost-style.scss | 4 ++
8 files changed, 75 insertions(+), 12 deletions(-)
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e0f0f14d..3b321148 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -42,6 +42,7 @@ export function initTarteaucitronService(tarteaucitronService: TarteAuCitronServ
resolve();
});
}
+
}
export function initAppConfig(appConfigService: AppConfigService) {
diff --git a/src/app/core/services/tarteaucitron.service.ts b/src/app/core/services/tarteaucitron.service.ts
index bc279692..2a442d1f 100644
--- a/src/app/core/services/tarteaucitron.service.ts
+++ b/src/app/core/services/tarteaucitron.service.ts
@@ -19,7 +19,8 @@ export class TarteAuCitronService {
"showAlertSmall" : false,
"cookieslist" : true,
- "iconPosition": "BottomRight",
+ "iconPosition": "BottomLeft",
+ "showIcon": false,
"AcceptAllCta" : true,
"DenyAllCta": false,
@@ -44,8 +45,18 @@ export class TarteAuCitronService {
tarteaucitron.user.matomoHost = APP_CONFIG.statistics.matomoHost;
(tarteaucitron.job = tarteaucitron.job || []).push('matomo');
+ (tarteaucitron.job = tarteaucitron.job || []).push('youtube');
resolve();
});
}
+
+ public initEvents()
+ {
+ if (tarteaucitron) {
+ console.log('passage ici.');
+ tarteaucitron.initEvents.loadEvent();
+ }
+ }
+
}
diff --git a/src/app/dataset-detail/services/dataset-detail.service.ts b/src/app/dataset-detail/services/dataset-detail.service.ts
index 684d5d71..c3cbd8f5 100644
--- a/src/app/dataset-detail/services/dataset-detail.service.ts
+++ b/src/app/dataset-detail/services/dataset-detail.service.ts
@@ -62,7 +62,7 @@ export class DatasetDetailService {
});
// Get the metadata
return this._elasticsearchService.getDatasetMetadata(slugOrUuid).pipe(
- map((e) => {
+ map((e:any) => {
if (e.hits.hits.length > 0) {
const metadata = new Metadata(e.hits.hits[0]._source['metadata-fr']);
this._dataset.uuid = metadata.geonet.uuid;
diff --git a/src/app/editorialisation/components/cms-page/cms-page.component.scss b/src/app/editorialisation/components/cms-page/cms-page.component.scss
index 839fae89..1222aec7 100644
--- a/src/app/editorialisation/components/cms-page/cms-page.component.scss
+++ b/src/app/editorialisation/components/cms-page/cms-page.component.scss
@@ -7,4 +7,5 @@
line-height: 1.2;
padding: 1rem;
}
+
}
diff --git a/src/app/editorialisation/components/cms-page/cms-page.component.ts b/src/app/editorialisation/components/cms-page/cms-page.component.ts
index 6a7f533c..f686d1b3 100644
--- a/src/app/editorialisation/components/cms-page/cms-page.component.ts
+++ b/src/app/editorialisation/components/cms-page/cms-page.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { environment } from '../../../../environments/environment';
+import { TarteAuCitronService } from '../../../core/services';
import { ToolsService } from '../../../core/services/tools.service';
import { AppRoutes } from '../../../routes';
import { IPageHeaderInfo } from '../../../shared/models';
@@ -13,7 +14,7 @@ import { EditorialisationService, SeoSErvice } from '../../services';
templateUrl: './cms-page.component.html',
styleUrls: ['./cms-page.component.scss'],
})
-export class CMSPageComponent implements OnInit {
+export class CMSPageComponent implements OnInit, AfterViewInit {
page: CMSContent;
safePageContent: SafeHtml;
pageHeaderInfo: IPageHeaderInfo = {
@@ -27,6 +28,7 @@ export class CMSPageComponent implements OnInit {
private _toolsService: ToolsService,
private _router: Router,
private _seoService: SeoSErvice,
+ private _tacService: TarteAuCitronService,
) {
}
@@ -54,4 +56,9 @@ export class CMSPageComponent implements OnInit {
});
});
}
+
+ ngAfterViewInit()
+ {
+ this._tacService.initEvents();
+ }
}
diff --git a/src/app/editorialisation/components/cms-post-detail/cms-post-detail.component.ts b/src/app/editorialisation/components/cms-post-detail/cms-post-detail.component.ts
index 310ac417..c0872802 100644
--- a/src/app/editorialisation/components/cms-post-detail/cms-post-detail.component.ts
+++ b/src/app/editorialisation/components/cms-post-detail/cms-post-detail.component.ts
@@ -1,6 +1,6 @@
import { DatePipe } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
-import { DomSanitizer, Meta, SafeHtml, Title } from '@angular/platform-browser';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ActivatedRoute, Router } from '@angular/router';
import { notificationMessages } from '../../../../i18n/traductions';
import { ToolsService } from '../../../core/services/tools.service';
@@ -9,14 +9,14 @@ import { SeoSErvice } from '../../services/seo.service'
import { AppRoutes } from '../../../routes';
import { IPageHeaderInfo, Metadata, typesMetadata } from '../../../shared/models';
import { CMSContent } from '../../models/cms-content.model';
-import { environment } from '../../../../environments/environment';
+import { TarteAuCitronService } from '../../../core/services';
@Component({
selector: 'app-cms-post-detail',
templateUrl: './cms-post-detail.component.html',
styleUrls: ['./cms-post-detail.component.scss'],
})
-export class CMSPostDetailComponent implements OnInit {
+export class CMSPostDetailComponent implements OnInit, AfterViewInit {
AppRoutes = AppRoutes;
post: CMSContent;
@@ -40,8 +40,7 @@ export class CMSPostDetailComponent implements OnInit {
private _elasticSearchService: ElasticsearchService,
private _seoService: SeoSErvice,
private _toolsService: ToolsService,
- private _titleService: Title,
- private _meta: Meta,
+ private _tacService: TarteAuCitronService,
) {
}
@@ -84,6 +83,11 @@ export class CMSPostDetailComponent implements OnInit {
}
}
+ ngAfterViewInit()
+ {
+ this._tacService.initEvents();
+ }
+
setBackupImage(metadata: Metadata) {
diff --git a/src/app/editorialisation/models/cms-content.model.ts b/src/app/editorialisation/models/cms-content.model.ts
index 9d7a45d9..9bf47025 100644
--- a/src/app/editorialisation/models/cms-content.model.ts
+++ b/src/app/editorialisation/models/cms-content.model.ts
@@ -1,4 +1,3 @@
-
export interface IESCMSResponse {
'content-fr': IGhostContentResponse;
type: string;
@@ -111,7 +110,8 @@ export class GhostContentResponse {
og_description?: string;
og_image?: string;
- constructor(data: IGhostContentResponse) {
+ constructor(data: IGhostContentResponse)
+ {
this.id = data.id;
this.status = (data.status != null) ? data.status : '';
this.title = (data.title != null) ? data.title : '';
@@ -143,9 +143,44 @@ export class GhostContentResponse {
});
+ this.html = this.youtubeParser(this.html);
+
this.author = (data.primary_author) ? data.primary_author : null;
this.highlight = [];
}
+
+ private youtubeParser (content:string): string {
+ // recherche de youtube
+ if (content.search('iframe') > 0) {
+ console.log(content);
+ var parser = new DOMParser();
+ var htmlContent = parser.parseFromString(content, 'text/html');
+
+ var iframes = htmlContent.getElementsByTagName('iframe');
+
+ for (var i = 0 ; i < iframes.length ; i++) {
+ let src = iframes[i].getAttribute('src');
+ var link = src.match(new RegExp(/(http(s)?:\/\/)?((w){3}.)?youtu(be|.be)?(\.com)?\/.+/mgi));
+
+ if (link.length > 0) {
+ // on récupère la derniere portion
+ var vid: string[]|string = link[0].match(new RegExp(/embed\/[a-zA-Z0-9]*/mgi) );
+ vid = vid[0].slice(6);
+
+ var youtubeDiv = document.createElement('div');
+ youtubeDiv.setAttribute('class','youtube_player');
+ youtubeDiv.setAttribute('videoID', vid);
+ youtubeDiv.setAttribute('width', '100%');
+ youtubeDiv.setAttribute('height','300px');
+
+
+ iframes[i].parentNode.replaceChild(youtubeDiv,iframes[i]);
+ }
+ }
+ content = htmlContent.getElementsByTagName('body')[0].innerHTML;
+ }
+ return content;
+ }
}
export interface ICMSMedia {
diff --git a/src/scss/ghost-style.scss b/src/scss/ghost-style.scss
index 6d1855fd..6e7f079b 100644
--- a/src/scss/ghost-style.scss
+++ b/src/scss/ghost-style.scss
@@ -69,6 +69,10 @@
height: 300px;
}
+ .youtube_player iframe {
+ height: 300px;
+ }
+
iframe:not([width]) {
width: 100%;
}
--
GitLab