diff --git a/addons/website_event_track_live/__manifest__.py b/addons/website_event_track_live/__manifest__.py
index 51bca88129c..4006e90fbb1 100644
--- a/addons/website_event_track_live/__manifest__.py
+++ b/addons/website_event_track_live/__manifest__.py
@@ -26,6 +26,7 @@
'assets': {
'web.assets_frontend': [
'website_event_track_live/static/src/scss/website_event_track_live.scss',
+ 'website_event_track_live/static/src/js/website_event_track_replay_suggestion.js',
'website_event_track_live/static/src/js/website_event_track_suggestion.js',
'website_event_track_live/static/src/js/website_event_track_live.js',
],
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 f44d70768c7..455d8b86bf4 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
@@ -5,10 +5,7 @@ odoo.define('website_event_track_live.website_event_youtube_embed', function (re
var publicWidget = require('web.public.widget');
var TrackSuggestionWidget = require('website_event_track_live.website_event_track_suggestion');
-
-var YOUTUBE_VIDEO_ENDED = 0;
-var YOUTUBE_VIDEO_PLAYING = 1;
-var YOUTUBE_VIDEO_PAUSED = 2;
+var ReplaySuggestionWidget = require('website_event_track_live.website_event_track_replay_suggestion');
publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
selector: '.o_wevent_event_track_live',
@@ -20,7 +17,6 @@ publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
var self = this;
return this._super(...arguments).then(function () {
self._setupYoutubePlayer();
- self.isFullScreen = !!document.fullscreenElement;
});
},
@@ -29,30 +25,27 @@ publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
//--------------------------------------------------------------------------
_onPlayerReady: function () {
- $(window).on('resize', this._onResize.bind(this));
this.$('.o_wevent_event_track_live_loading').remove();
},
_onPlayerStateChange: function (event) {
- if (event.data === YOUTUBE_VIDEO_ENDED) {
- this.trigger('video-ended');
- } else if (event.data === YOUTUBE_VIDEO_PLAYING) {
- this.trigger('video-playing');
- } else if (event.data === YOUTUBE_VIDEO_PAUSED) {
- this.trigger('video-paused');
- }
+ switch (event.data) {
+ case YT.PlayerState.ENDED:
+ this.trigger('video-ended');
+ return;
+ case YT.PlayerState.PLAYING:
+ this.trigger('video-playing');
+ return;
+ case YT.PlayerState.PAUSED:
+ this.trigger('video-paused');
+ return;
+ };
},
_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($('', {
- class:'owevent_track_suggestion_loading position-absolute w-100'
- }));
- }
-
+ this.$el.append($('', {
+ class: 'owevent_track_suggestion_loading position-absolute w-100'
+ }));
var self = this;
this._rpc({
route: '/event_track/get_track_suggestion',
@@ -69,21 +62,11 @@ publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
this.youtubePlayer.seekTo(0);
this.youtubePlayer.playVideo();
this.$('.owevent_track_suggestion_loading').remove();
- if (this.trackSuggestion) {
- delete this.trackSuggestion;
+ if (this.outro) {
+ delete this.outro;
}
},
- /**
- * The 'fullscreenchange' event is probably a better fit but it is unfortunately
- * not triggered when Youtube enters fullscreen mode.
- * However, the global window 'resize' is.
- */
- _onResize: function () {
- this.isFullScreen = !!document.fullscreenElement;
- this._showSuggestion();
- },
-
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
@@ -116,14 +99,26 @@ publicWidget.registry.websiteEventTrackLive = publicWidget.Widget.extend({
},
/**
- * Automatically launches the next suggested track when this one ends
- * and the user is not in fullscreen mode.
+ * If a new suggestion has been found, a cover containing a replay button
+ * as well as a suggestion will automatically be placed over the Youtube
+ * player when the video ends (in non-full screen mode). If no suggestion
+ * has been found, the cover will only contain a replay button.
*/
_showSuggestion: function () {
- if (this.nextSuggestion && !this.isFullScreen && !this.trackSuggestion) {
- this.trackSuggestion = new TrackSuggestionWidget(this, this.nextSuggestion);
- this.trackSuggestion.appendTo(this.$el);
- this.trackSuggestion.on('replay', null, this._onReplay.bind(this));
+ if (!this.outro) {
+ if (this.nextSuggestion) {
+ this.outro = new TrackSuggestionWidget(this, this.nextSuggestion);
+ } else {
+ var data = this.$el.data();
+ this.outro = new ReplaySuggestionWidget(this, {
+ current_track: {
+ name: data.trackName,
+ website_image_url: data.trackWebsiteImageUrl
+ }
+ });
+ }
+ this.outro.appendTo(this.$el);
+ this.outro.on('replay', null, this._onReplay.bind(this));
}
}
});
diff --git a/addons/website_event_track_live/static/src/js/website_event_track_replay_suggestion.js b/addons/website_event_track_live/static/src/js/website_event_track_replay_suggestion.js
new file mode 100644
index 00000000000..da96f91ecfe
--- /dev/null
+++ b/addons/website_event_track_live/static/src/js/website_event_track_replay_suggestion.js
@@ -0,0 +1,42 @@
+odoo.define('website_event_track_live.website_event_track_replay_suggestion', function (require) {
+'use strict';
+
+var Widget = require('web.Widget');
+
+/**
+ * The widget will have the responsibility to manage the interactions between the
+ * Youtube player and the cover containing a replay button. This widget will
+ * be used when no suggestion can be found in order to hide the Youtube suggestions.
+ */
+var WebsiteEventReplaySuggestion = Widget.extend({
+ template: 'website_event_track_live.website_event_track_replay_suggestion',
+ xmlDependencies: ['/website_event_track_live/static/src/xml/website_event_track_live_templates.xml'],
+ events: {
+ 'click .owevent_track_suggestion_replay': '_onReplayClick'
+ },
+
+ init: function (parent, options) {
+ this._super(...arguments);
+ this.currentTrack = {
+ 'name': options.current_track.name,
+ 'imageSrc': options.current_track.website_image_url,
+ };
+ },
+
+ //--------------------------------------------------------------------------
+ // Handlers
+ //--------------------------------------------------------------------------
+
+ /**
+ * If the user clicks on the replay button, the function will remove the
+ * cover and send a new event to the parent to replay the video from the
+ * beginning.
+ */
+ _onReplayClick: function () {
+ this.trigger_up('replay');
+ this.destroy();
+ }
+});
+
+return WebsiteEventReplaySuggestion;
+});
diff --git a/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml b/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
index 1784afae39c..5957de99739 100644
--- a/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
+++ b/addons/website_event_track_live/static/src/xml/website_event_track_live_templates.xml
@@ -1,6 +1,22 @@
+