Encountering a bug when trying to switch from one ionic slide to the next: Loom | Free Screen & Video Recording Software
Anybody think they know what the problem could be?
import { Component, OnInit, ViewChild, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Work } from 'src/app/interfaces/work';
import { SelectedWorksService } from 'src/app/services/selected-works.service';
import { DataApiService } from 'src/app/services/data-api.service';
import { IonSlides, AlertController } from '@ionic/angular';
import { from } from 'rxjs';
import { Artist } from 'src/app/interfaces/artist';
import { User } from 'src/app/interfaces/user';
import { Tag } from 'src/app/interfaces/tag';
interface OrientationSlide {
name: string,
hasLoaded: boolean,
works: Array<Work>,
}
@Component({
selector: 'app-works',
templateUrl: './works.page.html',
styleUrls: ['./works.page.scss'],
})
export class WorksPage implements OnInit {
@ViewChild("slides") slides: IonSlides;
slideOpts = {
initialSlide: 0,
speed: 400,
autoHeight: true,
resizeObserver: true,
updateOnWindowResize: true,
};
activeSlide = 0;
orientations: Array<OrientationSlide> = [
{
name: "portrait",
hasLoaded: false,
works: [],
},
{
name: "landscape",
hasLoaded: false,
works: [],
},
{
name: "square",
hasLoaded: false,
works: [],
},
{
name: "panoramic",
hasLoaded: false,
works: [],
},
];
user: User = null;
pageTitle: string = null;
// Possible filter data
artist: Artist = null;
genre: Tag = null;
constructor(
private router: Router,
private route: ActivatedRoute,
private selectedWorksService: SelectedWorksService,
private dataApi: DataApiService,
private changeDetector: ChangeDetectorRef,
private alertController: AlertController,
) { }
ngOnInit() {
let portraitOrientation = this.orientations.find(o => o.name === 'portrait');
portraitOrientation.works = this.route.snapshot.data['works'];
portraitOrientation.hasLoaded = true;
this.user = this.route.snapshot.data['user'];
// Filters
this.artist = this.route.snapshot.data['artist'];
this.genre = this.route.snapshot.data['genre'];
this.pageTitle = (this.artist && `${this.artist.firstName} ${this.artist.lastName}`)
|| (this.genre && this.genre.name) || null;
}
async onWorkClick(work: Work) {
if (!this.user.isPremier()) {
this.router.navigateByUrl(`/tabs/work/${work.workId}`);
return;
}
if (work.hasPermission) {
this.selectedWorksService.toggle(work.workId.toString());
}
else {
const alert = await this.alertController.create({
header: 'upgrade subscription',
message: 'You are not currently subscribed to view this work.',
buttons: ['ok']
});
await alert.present();
}
}
onSelectedWorksClick() {
this.router.navigate(['/tabs/selected-works/choose-display']);
// const workIds = this.selectedWorksService.getSelected();
// if (workIds.length === 1) {
// const workId = workIds[0];
// this.router.navigate([`/tabs/work/${workId}/choose-display`]);
// } else {
// this.router.navigate(['/tabs/selected-works/choose-display']);
// }
}
isSelected(workId: number) {
return this.selectedWorksService.isSelected(workId.toString());
}
getNumSelected() {
return this.selectedWorksService.getSelected().length;
}
clearSelected() {
this.selectedWorksService.clear();
}
goToOrientation(orientation: string) {
this.slides.slideTo(this.orientations.findIndex(o => o.name === orientation));
}
goToArtistSlide() {
this.slides.slideTo(this.orientations.length);
}
onSlideChange() {
from(this.slides.getActiveIndex()).subscribe(i => {
let orientation = this.orientations[i];
if (i !== 0 && orientation && orientation.works.length === 0) {
let filter = this.route.snapshot.paramMap.get('filter');
let filterValue = this.route.snapshot.paramMap.get('filterValue');
let filters = [{
name: 'orientation',
value: orientation.name
}];
if (filter) {
filters.push({ name: filter, value: filterValue });
}
this.dataApi.getFilteredWorks(filters).subscribe(works => {
orientation.hasLoaded = true;
if (works) {
orientation.works = works;
this.changeDetector.detectChanges();
}
});
}
this.activeSlide = i;
});
}
}
Here is the code above for the window shown in the loom where it freezes on tab change to a new window. Is there an easy fix for this?
1 post - 1 participant
Read full topic
This file is the root of your web app and must exist before
