diff --git a/src/app/pages/publications/view-publications/view-publications.page.ts b/src/app/pages/publications/view-publications/view-publications.page.ts index 73b151271..64067e991 100644 --- a/src/app/pages/publications/view-publications/view-publications.page.ts +++ b/src/app/pages/publications/view-publications/view-publications.page.ts @@ -56,6 +56,8 @@ export class ViewPublicationsPage implements OnInit { }; swiperModules = [IonicSlides]; + publicationList: any + @ViewChild('VideoManager') VideoManager; @ViewChildren('videoElement') videoElements: QueryList; @ViewChild('swiper') @@ -267,6 +269,7 @@ export class ViewPublicationsPage implements OnInit { if (!found) { this.publicationFolderService.publicationList[folderId].push(publicationDetails) this.publicationFolderService.revertPublicationOrder(folderId) + this.publicationList = this.publicationFolderService.publicationList[folderId]; } else { diff --git a/src/app/shared/swiper/swiper.module.ts b/src/app/shared/swiper/swiper.module.ts index 1fe457e80..1672b98f5 100644 --- a/src/app/shared/swiper/swiper.module.ts +++ b/src/app/shared/swiper/swiper.module.ts @@ -1,4 +1,4 @@ -import { NgModule } from '@angular/core'; +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @@ -7,6 +7,17 @@ import { IonicModule } from '@ionic/angular'; import { SwiperPageRoutingModule } from './swiper-routing.module'; import { SwiperPage } from './swiper.page'; +import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image'; +import { VisibilityDirective } from 'src/app/services/directives/visibility1.directive'; + +export class LazyLoadImageHooks extends IntersectionObserverHooks { + setup(attributes: Attributes) { + attributes.offset = 10; + attributes.defaultImagePath = "/assets/icon/icon-no-image.svg"; + attributes.errorImagePath = "/assets/icon/icon-no-image.svg"; + return super.setup(attributes); + } + } @NgModule({ imports: [ @@ -15,6 +26,45 @@ import { SwiperPage } from './swiper.page'; IonicModule, SwiperPageRoutingModule ], - declarations: [SwiperPage] + declarations: [SwiperPage,VisibilityDirective], + exports:[SwiperPage], + providers: [{provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks}], + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class SwiperPageModule {} + + +/* +import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { SwiperPageRoutingModule } from './swiper-routing.module'; + +import { SwiperPage } from './swiper.page'; +import { Attributes, IntersectionObserverHooks, LazyLoadImageModule, LAZYLOAD_IMAGE_HOOKS } from 'ng-lazyload-image'; +import { VisibilityDirective } from 'src/app/services/directives/visibility1.directive'; + +export class LazyLoadImageHooks extends IntersectionObserverHooks { + setup(attributes: Attributes) { + attributes.offset = 10; + attributes.defaultImagePath = "/assets/icon/icon-no-image.svg"; + attributes.errorImagePath = "/assets/icon/icon-no-image.svg"; + return super.setup(attributes); + } + } + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + SwiperPageRoutingModule + ], + declarations: [SwiperPage,VisibilityDirective], + providers: [{provide: LAZYLOAD_IMAGE_HOOKS, useClass: LazyLoadImageHooks}], + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class SwiperPageModule {} */ \ No newline at end of file diff --git a/src/app/shared/swiper/swiper.page.html b/src/app/shared/swiper/swiper.page.html index 1f9a093c7..cbca66a8b 100644 --- a/src/app/shared/swiper/swiper.page.html +++ b/src/app/shared/swiper/swiper.page.html @@ -1,9 +1,36 @@ - + + + +
+ + + + +
+ + + + + + +
+ + +
+ diff --git a/src/app/shared/swiper/swiper.page.scss b/src/app/shared/swiper/swiper.page.scss index e69de29bb..b16e2ea08 100644 --- a/src/app/shared/swiper/swiper.page.scss +++ b/src/app/shared/swiper/swiper.page.scss @@ -0,0 +1,325 @@ +@import "~src/function.scss"; + +:host { + background: transparent; + padding: 0 !important; +} +ion-content { + --background: transparent; + --border-radius: 30px; +} +ion-toolbar { + --border-width: 0 !important; + --border-style: none; + --padding-top: 0px !important; + --padding-start: 0px !important; + --padding-right: 0px !important; + --padding-end: 0px !important; +} + +.div-top-header { + width: 400px; + margin: 0 auto; + background-color: #0782c9; + padding-top: 15px; + border: 0 !important; +} +.div-search { + font-size: rem(45); + float: left; + margin: 0 0 0 10px; +} +.div-logo { + background: transparent; + width: 140px; + margin: 5px 0 0px 71px; + float: left; +} +.div-logo img { + width: 100%; +} +.div-profile { + font-size: rem(45); + float: right; + margin-right: 10px; +} +.main-header { + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + background-color: #fff; + overflow: hidden; + padding: 25px 20px 0px 20px; + color: #000; +} +.main-content { + width: 100%; /* 400px */ + height: 100%; + font-family: Roboto; + margin: 0 auto; + background-color: #fff; + padding: 15px 20px 0 20px; +} +.content-top { + background: #f3f2f2; + height: 20px; + margin: 0 auto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + transform: translate3d(0, 1px, 0); +} +.content-container { + width: 100%; + margin: 0 auto; + border-top-left-radius: 25px; + border-top-right-radius: 25px; + background: #ffffff; + height: 100%; + box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.6); + padding: 25px 0px 0 0px; + overflow: auto; +} +.title-content { + margin: 0px auto; + overflow: auto; + padding: 0 !important; +} + +.back-icon { + float: left; + font-size: rem(35); +} +.div-title { + /* padding: 0!important; */ + float: left; + margin: 2.5px 0 0 5px; + color: #000 !important; +} +.title { + color: #000 !important; +} + +.actions-icon { + float: right; +} +.actions-icon ion-icon { + margin-left: 10px; + float: right; +} +.item-content-date { + color: #797979; +} +.item-content-detail { + color: #000000; +} +.post-item { + width: 100%; + overflow: auto; + margin: 0 auto; + border-radius: 0px; + padding: 0 !important; +} +.post-img { + width: 100%; + height: 100%; + max-height: 400px; + min-height: 350px; + min-width: 350px; + margin: 5px auto; + border-radius: 0px !important; + overflow: hidden; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + background: black; + -webkit-border-radius: 0px !important; + -moz-border-radius: 0px !important; + -ms-border-radius: 0px !important; + -o-border-radius: 0px !important; +} +.post-video { + width: 100%; + height: 100%; + + max-height: 400px; + min-height: 350px; + min-width: 350px; + + margin: 5px auto; + + border-radius: 0px !important; + overflow: hidden; + background-color: white; + display: flex; + justify-content: center; + background: black; +} +video { + max-width: -webkit-fill-available; +} +.post-img img { + height: 100%; + max-height: 420px; +} +.post-content { + margin: 0 auto; + margin-bottom: 35px; +} +.post-title-time { + width: 100%; + overflow: auto; + margin-top: 10px; +} +.post-title { + width: 60%; + float: left; + color: #0d89d1; +} +.post-data { + width: 40%; + float: left; + color: #797979; + text-align: right; +} +.post-description { + color: #000; +} + +.font-13-em { + font-size: 0.8125em !important; +} + +.numbertext { + color: #f2f2f2; + font-size: 12px; + padding: 8px 12px; + position: absolute; + top: 0; +} + +.prev, +.next { + cursor: pointer; + position: absolute; + top: 50%; + width: auto; + margin-top: -22px; + padding: 16px; + color: white; + font-weight: bold; + font-size: 18px; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; +} + +/* Position the "next button" to the right */ +.next { + right: 0; + border-radius: 3px 0 0 3px; +} + +/* On hover, add a black background color with a little bit see-through */ +.prev:hover, +.next:hover { + background-color: rgba(0, 0, 0, 0.8); +} + +.dot { + cursor: pointer; + height: 15px; + width: 15px; + margin: 0 2px; + background-color: #bbb; + border-radius: 50%; + display: inline-block; + transition: background-color 0.6s ease; +} + +.active, +.dot:hover { + background-color: #717171; +} + +swiper-container { + width: 100%; + height: 100%; +} + +swiper-slide { + text-align: center; + font-size: 18px; + background: #ffff; + display: inline; + justify-content: center; + align-items: center; +} + +swiper-slide img { + width: 100%; + height: 100%; + + max-height: 400px; + min-height: 350px; + min-width: 350px; + + margin: 5px auto; + + border-radius: 0px !important; + overflow: hidden; + background-color: white; + display: flex; + justify-content: center; + align-items: center; + background: black; +} + + +swiper-slide video { + width: 100%; + height: 100%; + + max-height: 400px; + min-height: 350px; + min-width: 350px; + + margin: 5px auto; + + border-radius: 0px !important; + overflow: hidden; + background-color: white; + display: flex; + justify-content: center; + background: black; +} + + +.swiper-container::part(button-next) { + display: none !important; + .swiper-button-next { + display: none !important; + } +} + +.dotsSwiper { + height: 10px; + width: 10px; + background-color: gray; + border-radius: 50%; + display: inline-block; +} + +.active-dot { + background-color: black; +} + +.dots-container { + width: 100%; + text-align: center; +} + +.dots-container span { + display: inline-block; /* Display dots in a row */ + margin-right: 5px; +} diff --git a/src/app/shared/swiper/swiper.page.ts b/src/app/shared/swiper/swiper.page.ts index 5cd742be3..f67b741ce 100644 --- a/src/app/shared/swiper/swiper.page.ts +++ b/src/app/shared/swiper/swiper.page.ts @@ -1,4 +1,6 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'; +import { checkFileTypeService } from 'src/app/services/checkFileType.service'; +import { StopvideoService } from 'src/app/services/stopvideo.service'; @Component({ selector: 'app-swiper', @@ -7,9 +9,66 @@ import { Component, OnInit } from '@angular/core'; }) export class SwiperPage implements OnInit { - constructor() { } + + @Input() publicationList: any; + swiperIndex: number = 0; + + @ViewChild('VideoManager') VideoManager; + @ViewChild('videoElement') videoElements: ElementRef | undefined; + @ViewChild('swipers') + swiperRef: ElementRef | undefined; + + + constructor( + public checkFileType: checkFileTypeService, + public stopvideoService: StopvideoService, + ) { + console.log('swieper', this.publicationList) + } ngOnInit() { + console.log('swieper', this.publicationList) + } + + onSlideChange() { + this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex; + console.log(this.swiperIndex) + } + + goToSlide(index: number) { + this.swiperIndex = this.swiperRef?.nativeElement.swiper.activeIndex; + this.swiperRef?.nativeElement.swiper.slideTo(index); + console.log('index slide', index) + } + + onVisibilityChange = (e: boolean) => { + if (!e) { + this.stopVideo() + } + } + + stopVideo() { + var videos = document.querySelectorAll('video'); + + try { + // Pause each video + videos.forEach(function (video) { + video.pause(); + }) + + const video: HTMLVideoElement = this.videoElements.nativeElement; + + video.pause() + + /* this.videoElements.forEach(videoElement => { + // You can access the native HTML video element using videoElement.nativeElement + + // Do something with each video element + // console.log(video); + }); */ + } catch (error) { + console.log(error) + } } } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 43c1647f5..0bd217c5f 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -4,4 +4,4 @@ import { environment as oaprProd } from './suport/oapr' import { DevDev } from './suport/dev' -export const environment: Environment = DevDev; +export const environment: Environment = oaprProd;