pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Aurélien Warnon
2020-10-02 07:26:27 +00:00
parent c8f029744b
commit f3fb952ac8
4 changed files with 34 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_event_track/static/src/scss/event_track_templates_online.scss
+4 -4
View File
@@ -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;
}
addons/website_event_track_live/static/src/js/website_event_track_live.js
+10
View File
@@ -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;
}
addons/website_event_track_live/static/src/scss/website_event_track_live.scss
+9
View File
@@ -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%;
addons/website_event_track_live/views/event_track_templates_page.xml
+11 -4
View File
@@ -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>