Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

video section

master
Boris Voropaev 2023-12-05 11:58:01 +03:00
parent 71821e3054
commit e020b039d3
7 changed files with 127 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/_modules/pages/sections/types/basic/video/video-section.component.html
View File

@ -1,5 +1,12 @@
<iframe [src]="url"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
<div class="video-box">
<img class="poster" [src]="poster" alt="" *ngIf="!start" (click)="start=true">
<img class="icon" src="assets\images\ico\video_play_60.svg" *ngIf="!start" (click)="start=true">
<iframe *ngIf="start"
[src]="url"
frameborder="0"
[autoplay]="source == 'youtube.com'"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>

6
src/app/_modules/pages/sections/types/basic/video/video-section.component.scss
View File

@ -1,6 +0,0 @@
iframe {
width: 100%;
max-width: 720px;
min-height: 400px;
height: 100%;
}

29
src/app/_modules/pages/sections/types/basic/video/video-section.component.ts
View File

@ -17,27 +17,38 @@ export class VideoSectionComponent {
}
public url:any = '';
public source:string;
public videoID:string;
public poster:string;
public start = false;
ngOnInit() {
const url = this.parsedUrl(this.objectsService.getValue(this.section, 'video-url'));
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(url);
const URL = this.parsedUrl(this.objectsService.getValue(this.section, 'video-url'));
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(URL);
}
parsedUrl(url: any) {
let res = '';
let videoId = '';
if (/https:\/\/youtu.be\//.test(url)) {
videoId = url.replace('https://youtu.be/','');
res = 'https://www.youtube.com/embed/' + videoId;
this.videoID = url.replace('https://youtu.be/','').replace(/\?.*/,'');
this.source = 'youtube.com';
res = 'https://www.youtube.com/embed/' + this.videoID + '?autoplay=1';
} else if (/https:\/\/www\.youtube\.com\/watch\?v\=/.test(url)) {
videoId = url.replace('https://www.youtube.com/watch?v=','');
res = 'https://www.youtube.com/embed/' + videoId;
this.videoID = url.replace('https://www.youtube.com/watch?v=','').replace(/\?.*/,'');
this.source = 'youtube.com';
res = 'https://www.youtube.com/embed/' + this.videoID + '?autoplay=1';
} else if (/https:\/\/rutube.ru\/video\//.test(url)) {
videoId = url.replace('https://rutube.ru/video/','');
res = 'https://rutube.ru/play/embed/' + videoId;
this.videoID = url.replace('https://rutube.ru/video/','');
this.source = 'rutube.ru';
this.start = true;
res = 'https://rutube.ru/play/embed/' + this.videoID;
} else {
this.start = true;
res = url;
}
if (this.source == 'youtube.com') {
this.poster = 'https://img.youtube.com/vi/' + this.videoID + '/hqdefault.jpg'
}
return res;
}
}

31
src/assets/css/_pages-section.scss
View File

@ -354,4 +354,35 @@ gellery{
width: 100%;
height: 100%;
}
}
video-section{
.video-box{
max-width: 720px;
height: 400px;
position: relative;
img{
cursor:pointer
}
.poster{
object-fit: cover;
width: 100%;
height: 100%;
}
.icon{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
iframe{
width: 100%;
height: 100%;
background-color: black;
}
}
}

17
src/assets/images/ico/video_play_60.svg Normal file
View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 76 76" fill="none" id="ico">
<g filter="url(#filter0_d_1783_10824)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 8H11H8V11V26H11V11H26V8ZM30 26L51 38L30 50V26ZM50 8H65H68V11V26H65V11H50V8ZM68 50H65V65H50V68H65H68V65V50ZM8 50H11V65H26V68H11H8V65V50Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_1783_10824" x="0" y="0" width="76" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1783_10824"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1783_10824" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

30
src/vniigaz-v2/css/_pages-section.scss
View File

@ -421,4 +421,34 @@ gellery{
width: 100%;
height: 100%;
}
}
video-section{
.video-box{
max-width: 720px;
height: 400px;
position: relative;
img{
cursor:pointer
}
.poster{
object-fit: cover;
width: 100%;
height: 100%;
}
.icon{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
iframe{
width: 100%;
height: 100%;
background-color: black;
}
}
}

17
src/vniigaz-v2/images/ico/video_play_60.svg Normal file
View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" width="76" height="76" viewBox="0 0 76 76" fill="none" id="ico">
<g filter="url(#filter0_d_1783_10824)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26 8H11H8V11V26H11V11H26V8ZM30 26L51 38L30 50V26ZM50 8H65H68V11V26H65V11H50V8ZM68 50H65V65H50V68H65H68V65V50ZM8 50H11V65H26V68H11H8V65V50Z" fill="white"/>
</g>
<defs>
<filter id="filter0_d_1783_10824" x="0" y="0" width="76" height="76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="4"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1783_10824"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1783_10824" result="shape"/>
</filter>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB