Transition: Add Simple Dissolve transition

Signed-off-by: Javiya Vivekkumar Dineshbhai <vivek.javiya@collabora.com>
Change-Id: I808c15d6b940965a68471c5ec21c892f382a0e25

3 files changed, 89 insertions, 1 deletions

diff --git a/browser/Makefile.am b/browser/Makefile.am
index 7b21d76e9b..906b0d5075 100644
--- a/browser/Makefile.am
+++ b/browser/Makefile.am
@@ -422,6 +422,7 @@ COOL_JS_LST =\
 	src/slideshow/transition/BoxTransition.ts \
 	src/slideshow/transition/DiamondTransition.ts\
 	src/slideshow/transition/CheckersTransition.ts \
+	src/slideshow/transition/SimpleDissolveTransition.ts \
 	src/slideshow/transition/BarsTransition.ts \
 	src/slideshow/transition/CutTransition.ts \
 	src/slideshow/transition/WheelTransition.ts \
@@ -872,6 +873,7 @@ pot:
 		src/slideshow/transition/OvalTransition.ts\
 		src/slideshow/transition/DiamondTransition.ts\
 		src/slideshow/transition/CheckersTransition.ts \
+		src/slideshow/transition/SimpleDissolveTransition.ts \
 		src/slideshow/transition/BarsTransition.ts \
 		src/slideshow/transition/CutTransition.ts \
 		src/slideshow/transition/WheelTransition.ts \
diff --git a/browser/src/slideshow/PerformTransition.ts b/browser/src/slideshow/PerformTransition.ts
index acfde498b3..8b7e509d45 100644
--- a/browser/src/slideshow/PerformTransition.ts
+++ b/browser/src/slideshow/PerformTransition.ts
@@ -135,7 +135,13 @@ SlideShow.PerformTransition = function (
                 image2,
             ).start(1);
             break;   
-        
+        case 'DISSOLVE':
+            new SimpleDissolveTransition(
+                canvas,
+                image1,
+                image2,
+            ).start();
+            break;
 
 
         default:
diff --git a/browser/src/slideshow/transition/SimpleDissolveTransition.ts b/browser/src/slideshow/transition/SimpleDissolveTransition.ts
new file mode 100644
index 0000000000..1355d6bd35
--- /dev/null
+++ b/browser/src/slideshow/transition/SimpleDissolveTransition.ts
@@ -0,0 +1,80 @@
+/*
+ * Copyright the Collabora Online contributors.
+ *
+ * SPDX-License-Identifier: MPL-2.0
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+declare var SlideShow: any;
+
+class SimpleDissolveTransition extends SlideShow.Transition2d {
+	constructor(
+		canvas: HTMLCanvasElement,
+		image1: HTMLImageElement,
+		image2: HTMLImageElement,
+	) {
+		super(canvas, image1, image2);
+		this.prepareTransition();
+		this.animationTime = 2000;
+	}
+
+
+	public start(): void {
+		this.startTransition();
+	}
+
+	public getVertexShader(): string {
+		return `#version 300 es
+				in vec4 a_position;
+				in vec2 a_texCoord;
+				out vec2 v_texCoord;
+
+				void main() {
+					gl_Position = a_position;
+					v_texCoord = a_texCoord;
+				}
+				`;
+	}
+
+	public getFragmentShader(): string {
+		return `#version 300 es
+				precision mediump float;
+
+				uniform sampler2D leavingSlideTexture;
+				uniform sampler2D enteringSlideTexture;
+				uniform float time;
+
+				in vec2 v_texCoord;
+				out vec4 outColor;
+
+				// generate a pseudo-random value based on coordinates
+				float random(vec2 co) {
+					return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+				}
+
+				void main() {
+					vec2 uv = v_texCoord;
+					
+					float progress = time;
+
+					float numSquares = 10.0; 
+
+					vec2 squareSize = vec2(1.0 / numSquares, 1.0 / numSquares);
+
+					vec2 checkerCoord = floor(uv / squareSize);
+
+					float randValue = random(checkerCoord);
+
+					bool showEntering = progress > randValue;
+
+					vec4 color1 = texture(leavingSlideTexture, uv);
+					vec4 color2 = texture(enteringSlideTexture, uv);
+
+					outColor = mix(color1, color2, float(showEntering));
+				}
+				`;
+	}
+}