From f3fb952ac8121ab9d5ce99c0515217acd004bc33 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aur=C3=A9lien=20Warnon?= <awa@odoo.com>
Date: Mon, 28 Sep 2020 10:59:12 +0000
Subject: [PATCH] [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#58949

X-original-commit: 38be9fec2130f04374e378510f169a65d4bc693f
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: awa-odoo <awa-odoo@users.noreply.github.com>
---
 .../src/scss/event_track_templates_online.scss    |  8 ++++----
 .../static/src/js/website_event_track_live.js     | 10 ++++++++++
 .../static/src/scss/website_event_track_live.scss |  9 +++++++++
 .../views/event_track_templates_page.xml          | 15 +++++++++++----
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/addons/website_event_track/static/src/scss/event_track_templates_online.scss b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
index f6d2aec008c..170bc4c8028 100644
--- a/addons/website_event_track/static/src/scss/event_track_templates_online.scss
+++ b/addons/website_event_track/static/src/scss/event_track_templates_online.scss
@@ -44,11 +44,11 @@
         .o_wesession_track_main {
             // Force side panel min-width to account for potential Youtube chat
             // And adapt main panel max-width accordingly.
-            @include media-breakpoint-up(xl) {
+            @include media-breakpoint-up(md) {
                 max-width: calc(100% - 22rem);
             }
 
-            @media screen and (min-width: 1400px) {
+            @media screen and (min-width: 1900px) {
                 // return to bootstrap value for col-lg-9 / 10 breakpoint if screen is big enough
                 &.col-lg-9 {
                     max-width: 75%;
@@ -63,11 +63,11 @@
         // Left panel: other tracks
         .o_wesession_track_aside {
             // Force side panel min-width to account for potential Youtube chat
-            @include media-breakpoint-up(xl) {
+            @include media-breakpoint-up(md) {
                 min-width: 22rem;
             }
 
-            @media screen and (min-width: 1400px) {
+            @media screen and (min-width: 1900px) {
                 min-width: auto;
             }
 
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>