[FIX] website_event_track_[session|live]: adjust event 'Youtube' layouts

This commit makes some minor changes to the Youtube video & chat layouts when
embedded in an event to ensure a better viewing experience.

Changes in details:
- Improve the "chat tab" to ensure the width is sufficient to display all of
  the Youtube chat iframe on any resolution ;
- If the video is "live" and has a chat tab, the chat is now displayed as the
  first tab (before this change, the "other tracks" tab was always displayed
  first) ;
- When displaying the next suggestion, add a covering block to avoid a
  potential flicker while fetching the suggestion to go to.

Task 2345887

closes odoo/odoo#58700

X-original-commit: f86e7b533e6e68e9caf47563da30a984283e20a7
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: awa-odoo <awa-odoo@users.noreply.github.com>

3 files changed, 30 insertions, 4 deletions

diff --git a/addons/website_event_track_live/static/src/js/website_event_track_live.js b/addons/website_event_track_live/static/src/js/website_event_track_live.js
index a330308de63..f44d70768c7 100644
--- a/addons/website_event_track_live/static/src/js/website_event_track_live.js
+++ b/addons/website_event_track_live/static/src/js/website_event_track_live.js
@@ -44,6 +44,15 @@ publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
     },
 
     _onVideoEnded: function () {
+        if (this.$el.data('hasNextSuggestion')) {
+            // if we have an upcoming suggestion, add a covering block to avoid
+            // showing Youtube suggestions while we fetch the appropriate suggestion
+            // using a rpc. This allows avoiding a 'flicker' effect.
+            this.$el.append($('<div/>', {
+                class:'owevent_track_suggestion_loading position-absolute w-100'
+            }));
+        }
+
         var self = this;
         this._rpc({
             route: '/event_track/get_track_suggestion',
@@ -59,6 +68,7 @@ publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
     _onReplay: function () {
         this.youtubePlayer.seekTo(0);
         this.youtubePlayer.playVideo();
+        this.$('.owevent_track_suggestion_loading').remove();
         if (this.trackSuggestion) {
             delete this.trackSuggestion;
         }
diff --git a/addons/website_event_track_live/static/src/scss/website_event_track_live.scss b/addons/website_event_track_live/static/src/scss/website_event_track_live.scss
index 28571e01ffa..d9e4623ab00 100644
--- a/addons/website_event_track_live/static/src/scss/website_event_track_live.scss
+++ b/addons/website_event_track_live/static/src/scss/website_event_track_live.scss
@@ -14,7 +14,16 @@
     }
 }
 
+.owevent_track_suggestion_loading {
+    z-index: 1;
+    background-color: #434343;
+    height: 85vh;
+    top: 0px;
+    left: 0px;
+}
+
 .owevent_track_suggestion {
+    z-index: 2;
     background-color: #888888;
     background-repeat: no-repeat;
     background-size: 100% 100%;
diff --git a/addons/website_event_track_live/views/event_track_templates_page.xml b/addons/website_event_track_live/views/event_track_templates_page.xml
index 1ac7dfd2748..37dd813c003 100644
--- a/addons/website_event_track_live/views/event_track_templates_page.xml
+++ b/addons/website_event_track_live/views/event_track_templates_page.xml
@@ -20,7 +20,8 @@
         <t t-set="show_youtube_frame" t-value="track.youtube_video_url and (track.is_youtube_replay or track.is_track_soon or track.is_track_live or track.is_track_done)" />
         <div t-if="show_youtube_frame" class="flex-grow-1 o_wevent_event_track_live"
             t-att-data-track-id="track.id"
-            t-att-data-youtube-video-id="track.youtube_video_id">
+            t-att-data-youtube-video-id="track.youtube_video_id"
+            t-att-data-has-next-suggestion="bool(track._get_track_suggestions(restrict_domain=[('youtube_video_url', '!=', False), ('is_published', '=', True)], limit=1))">
             <div class="position-absolute o_wevent_event_track_live_loading w-100 d-flex align-items-center justify-content-center text-white h4">
                 <i class="fa fa-spin fa-spinner position-relative"/>
                 <span class="pl-2">Loading Video...</span>
@@ -32,22 +33,28 @@
 
 <!-- ASIDE: ADD CHAT TAB FOR VIDEOS -->
 <template id="event_track_aside" inherit_id="website_event_track.event_track_aside">
-    <xpath expr="//ul[hasclass('o_wesession_track_aside_nav')]" position="inside">
+    <xpath expr="//ul[hasclass('o_wesession_track_aside_nav')]/li" position="before">
         <li t-if="track.is_youtube_chat_available and not is_mobile_chat_disabled" class="nav-item flex-grow-1">
-            <a href="#track_chat" aria-controls="track_chat" class="nav-link" role="tab" data-toggle="tab">
+            <a href="#track_chat" aria-controls="track_chat" class="nav-link active" role="tab" data-toggle="tab">
                 Chat
             </a>
         </li>
     </xpath>
+    <xpath expr="//a[@href='#track_list']" position="attributes">
+        <attribute name="t-attf-class">#{'nav-link' if track.is_youtube_chat_available and not is_mobile_chat_disabled else 'nav-link active'}</attribute>
+    </xpath>
     <xpath expr="//div[hasclass('o_wesession_track_aside_tabs')]" position="inside">
         <div t-if="track.is_youtube_chat_available and not is_mobile_chat_disabled" id="track_chat"
-            class="tab-pane fade o_wesession_track_aside_tab_chat" role="tabpanel">
+            class="tab-pane fade show active o_wesession_track_aside_tab_chat" role="tabpanel">
             <iframe t-attf-src="https://www.youtube.com/live_chat?v=#{track.youtube_video_id}&amp;embed_domain=#{hostname}"
                 height="100%"
                 width="100%"
                 frameborder="0" allowfullscreen="allowfullscreen"/>
         </div>
     </xpath>
+    <xpath expr="//div[@id='track_list']" position="attributes">
+        <attribute name="t-attf-class">#{'tab-pane fade' if track.is_youtube_chat_available and not is_mobile_chat_disabled else 'tab-pane fade show active'}</attribute>
+    </xpath>
 </template>
 
 </odoo>