SlideShow: use high resolution slides

- we use getPreview tof etch high resolution images
what takes time
- flow is converted into async version with callbacks
called when we receive tiles, so we are sure we have
the data already

Signed-off-by: Szymon Kłos <szymon.klos@collabora.com>
Change-Id: I93d25abdd33a3e5a6849238f538b3f83fcfeae77

2 files changed, 50 insertions, 21 deletions

diff --git a/browser/src/slideshow/SlideCompositor.ts b/browser/src/slideshow/SlideCompositor.ts
index f23b02b804..51b30ddaf6 100644
--- a/browser/src/slideshow/SlideCompositor.ts
+++ b/browser/src/slideshow/SlideCompositor.ts
@@ -14,12 +14,22 @@
 declare var SlideShow: any;
 
 class SlideCompositor {
+	_slideShowPresenter: SlideShowPresenter = null;
 	_presentationInfo: PresentationInfo = null;
 	_slides: Array<HTMLImageElement> = null;
+	_width: number = 0;
+	_height: number = 0;
+	_initialSlideNumber: number = 0;
+	_onGotSlideCallback: VoidFunction = null;
 	_FETCH_ID_: number = 1000; // TODO
 
-	constructor(presentationInfo: PresentationInfo) {
+	constructor(slideShowPresenter: SlideShowPresenter, presentationInfo: PresentationInfo,
+		width: number, height: number
+	) {
+		this._slideShowPresenter = slideShowPresenter;
 		this._presentationInfo = presentationInfo;
+		this._width = width;
+		this._height = height;
 
 		const numberOfSlides = this._getSlidesCount();
 		this._slides = new Array<HTMLImageElement>(numberOfSlides);
@@ -37,6 +47,13 @@ class SlideCompositor {
 
 	public updatePresentationInfo(presentationInfo: PresentationInfo) {
 		this._presentationInfo = presentationInfo;
+		this._requestPreview(this._initialSlideNumber);
+	}
+
+	public fetchAndRun(slideNumber: number, callback: VoidFunction) {
+		this._initialSlideNumber = slideNumber;
+		this._onGotSlideCallback = callback;
+		this._requestPreview(this._initialSlideNumber);
 	}
 
 	private _getSlidesCount() {
@@ -44,11 +61,11 @@ class SlideCompositor {
 	}
 
 	private _getSlideWidth() {
-		return this._presentationInfo.docHeight;
+		return this._width;
 	}
 
 	private _getSlideHeight() {
-		return this._presentationInfo.docHeight;
+		return this._height;
 	}
 
 	/// called when we receive slide content
@@ -56,7 +73,16 @@ class SlideCompositor {
 		if (!this._slides || !this._slides.length) return;
 
 		console.debug('SlideCompositor: received slide: ' + e.part);
-		this._slides[parseInt(e.part)] = e.tile.src;
+		const received = new Image();
+		received.src = e.tile.src;
+		this._slides[e.part] = received;
+
+		if (e.part === this._initialSlideNumber && this._onGotSlideCallback) {
+			const callback = this._onGotSlideCallback; // allow nesting
+			this._onGotSlideCallback = null;
+			callback.call(this._slideShowPresenter);
+		}
+
 	}
 
 	private _requestPreview(slideNumber: number) {
@@ -68,16 +94,14 @@ class SlideCompositor {
 			this._getSlideHeight(),
 			{
 				autoUpdate: false,
+				fetchThumbnail: false,
 			},
 		);
 	}
 
 	public getSlide(slideNumber: number): HTMLImageElement {
 		// use cache if possible
-		const slide =
-			this._slides && this._slides[slideNumber]
-				? this._slides[slideNumber]
-				: app.map._docLayer._preview._previewTiles[slideNumber].src;
+		const slide = this._slides[slideNumber];
 
 		// pre-fetch next slide
 		this._requestPreview(slideNumber + 1);
diff --git a/browser/src/slideshow/SlideShowPresenter.ts b/browser/src/slideshow/SlideShowPresenter.ts
index d46f6d8f16..62dee2c5d9 100644
--- a/browser/src/slideshow/SlideShowPresenter.ts
+++ b/browser/src/slideshow/SlideShowPresenter.ts
@@ -78,10 +78,11 @@ class SlideShowPresenter {
 			return;
 		}
 
-		const previousSlide = this._slideCompositor.getSlide(this._currentSlide);
-
-		this._doTransition(previousSlide, this._currentSlide + 1);
-		this._currentSlide++;
+		this._slideCompositor.fetchAndRun(this._currentSlide, () => {
+			const previousSlide = this._slideCompositor.getSlide(this._currentSlide);
+			this._doTransition(previousSlide, this._currentSlide + 1);
+			this._currentSlide++;
+		});
 	}
 
 	_createCanvas(width: number, height: number) {
@@ -101,26 +102,27 @@ class SlideShowPresenter {
 	}
 
 	_doTransition(previousSlide: HTMLImageElement, nextSlideNumber: number) {
-		const nextSlide = this._slideCompositor.getSlide(nextSlideNumber);
-		nextSlide.onload = () => {
+		this._slideCompositor.fetchAndRun(nextSlideNumber, () => {
+			const nextSlide = this._slideCompositor.getSlide(nextSlideNumber);
 			SlideShow.PerformTransition(
 				this._slideShowCanvas,
 				previousSlide,
 				nextSlide,
 				'FADE',
 			);
-		};
+		});
 	}
 
 	_doPresentation() {
-		const previousSlide = this._slideCompositor.getSlide(this._currentSlide);
-		this._doTransition(previousSlide, this._currentSlide);
+		this._slideCompositor.fetchAndRun(this._currentSlide, () => {
+			const previousSlide = this._slideCompositor.getSlide(this._currentSlide);
+			this._doTransition(previousSlide, this._currentSlide);
+		});
 	}
 
 	_doFallbackPresentation = () => {
-		// fallback to "open in new tab"
+		// TODO: fallback to "open in new tab"
 		this._stopFullScreen();
-		this._doPresentation();
 	};
 
 	_onFullScreen() {
@@ -158,7 +160,7 @@ class SlideShowPresenter {
 				this._slideShowCanvas
 					.requestFullscreen()
 					.then(() => {
-						this._doPresentation();
+						// success
 					})
 					.catch(() => {
 						this._doFallbackPresentation();
@@ -237,7 +239,10 @@ class SlideShowPresenter {
 		if (this._slideCompositor)
 			this._slideCompositor.updatePresentationInfo(this._presentationInfo);
 		else
-			this._slideCompositor = new SlideShow.SlideCompositor(this._presentationInfo);
+			this._slideCompositor = new SlideShow.SlideCompositor(this, this._presentationInfo,
+				this._slideShowCanvas.width, this._slideShowCanvas.height);
+
+		this._slideCompositor.fetchAndRun(0, () => { this._doPresentation(); });
 	}
 }