From c357496609e76181d026a0879aa9e68085c91cf5 Mon Sep 17 00:00:00 2001
From: "Maruan Aguerdouh (magm)" <magm@odoo.com>
Date: Fri, 22 Mar 2024 09:44:14 +0100
Subject: [PATCH] [FIX] website_slides: load animations after slide loaded
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Issue: When using the Fullscreen mode of slides for articles we do run
first the website animations before loading the slide, which will make
the content to stay invisible since we will never actually perform the
animation.

Steps to reproduce:

1. Create a new course with an article content.
2. Add any block (text, image).
3. Add an animation to this piece of block.
4. Go to Fullscreen mode.

Solution:

We manually instantiate and attach the WebsiteAnimate widget to
the wpContainer element to ensure animations are properly initialized
and applied after the slide has loaded, after that we get rid of this
instance after every new slide that load so we avoid having multiple
instances.

opw-3757919

closes odoo/odoo#159445

X-original-commit: 593ca1f36a4a9da753d8361840b07e2445f2d99b
Signed-off-by: Warnon Aurélien (awa) <awa@odoo.com>
Signed-off-by: Maruan Aguerdouh Mohtar (magm) <magm@odoo.com>
---
 .../static/src/js/slides_course_fullscreen_player.js        | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
index 8891850eace..50b4d418437 100644
--- a/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
+++ b/addons/website_slides/static/src/js/slides_course_fullscreen_player.js
@@ -651,6 +651,10 @@
                 var slide = this.get('slide');
                 var $content = this.$('.o_wslides_fs_content');
                 $content.empty();
+                if (this.websiteAnimateWidget) {
+                    this.websiteAnimateWidget.destroy()
+                    this.websiteAnimateWidget = null;
+                }
 
                 // display quiz slide, or quiz attached to a slide
                 if (slide.category === 'quiz' || slide.isQuiz) {
@@ -671,12 +675,14 @@
                 } else if (slide.category === 'video' && slide.videoSourceType === 'google_drive') {
                     $content.empty().append(renderToElement('website.slides.fullscreen.video.google_drive', {widget: this}));
                 } else if (slide.category === 'article'){
+                    this.websiteAnimateWidget = new publicWidget.registry.WebsiteAnimate();
                     var $wpContainer = $('<div>').addClass('o_wslide_fs_article_content bg-white block w-100 overflow-auto p-3');
                     $wpContainer.html(slide.htmlContent);
                     $content.append($wpContainer);
                     this.trigger_up('widgets_start_request', {
                         $target: $content,
                     });
+                    this.websiteAnimateWidget.attachTo($wpContainer);
                 }
                 unhideConditionalElements();
             } finally {