MATT-2548 Help About-player popup with cookie

config/config.json

@@ -179,6 +179,9 @@
       "es.upv.paella.playbackRatePlugin": {
         "enabled": true
       },
+      "edu.harvard.dce.paella.showInfoOverlay": {
+        "enabled": true
+      },
       "es.upv.paella.helpPlugin": {
         "enabled": false,
         "langs": [

vendor/plugins/edu.harvard.dce.paella.infoButtonPlugin/dce_infobutton.js

@@ -45,6 +45,7 @@ Class ('paella.plugins.InfoPlugin', paella.ButtonPlugin,{
     var thisClass = this;
     var elem = jQuery('<div />');
     elem.attr({'class': 'infoItemButton'}).text(buttonAction);
+    elem.attr({'id': 'info-' + buttonAction.replace(/\s+/g, '-').toLowerCase()}).text(buttonAction);
     elem.click(function (event) {
       thisClass.onItemClick(buttonAction);
     });

vendor/plugins/edu.harvard.dce.paella.infoButtonPlugin/dce_infobutton.less

@@ -1,3 +1,4 @@
+
 .buttonPlugin.showInfoPluginButton {
   background-position: -800% -200%;
 }

vendor/plugins/edu.harvard.dce.paella.showAboutPlayerMessage/showAboutPlayerMessage.js

@@ -0,0 +1,114 @@
+// #DCE MATT-2548 overload on player load that links to About Player
+// Option to omit the message on future page loads (via cookie)
+"use strict";
+Class ("paella.plugins.ShowAboutPlayerMessage", paella.DeferredLoadPlugin, {
+  omitMessageCookie: "hudce-omitPlayerAboutMessage",
+  omitMessageId: "aboutPlayer-stopMessage",
+  showAboutLinkId: "aboutPlayer-aboutLink",
+  showAboutTitleId: "aboutPlayer-title",
+  showAboutContainerId: "aboutPlayer-container",
+  firstLoad: true,
+  cookieValue: null,
+  isActive: false,
+  didPause: false,
+  messageContainer: null,
+  type: 'vod', //default about help type
+  getName: function () {
+    return "edu.harvard.dce.paella.showAboutPlayerMessage";
+  },
+  load: function () {
+    var self = this;
+    self.type = paella.player.isLiveStream() ? "live": "vod";
+    self.cookieValue = base.cookies.get(self.getCookieName());
+    if (! self.cookieValue) {
+      self.doShow();
+    }
+  },
+  doShow: function () {
+    var self = this;
+    // only once per page load
+    if (! self.firstLoad) return;
+    self.firstLoad = false;
+    self.type = paella.player.isLiveStream() ? "live": "vod";
+    self.cookieValue = base.cookies.get(self.getCookieName());
+    if (! self.cookieValue) {
+      self.showAboutMessage();
+      if (self.type == "vod") {
+        paella.events.trigger(paella.events.pause);
+      }
+    }
+  },
+  getCookieName: function () {
+    return this.omitMessageCookie + "-" + this.type;
+  },
+  showAboutMessage: function () {
+    var self = this;
+    var containerElem = document.createElement('div');
+    containerElem.id = self.showAboutContainerId;
+    var titleElem = document.createElement('div');
+    titleElem.id = this.showAboutTitleId;
+    titleElem.innerHTML = "PLAYER INFORMATION";
+    var showMessageElem = document.createElement('div');
+    showMessageElem.id = this.omitMessageId;
+    $('<input />', {
+      type: 'checkbox', id: 'cb-' + this.omitMessageId, value: 'cb-' + this.omitMessageId, checked: "checked"
+    }).appendTo(showMessageElem);
+    $('<label />', {
+      'for': 'cb-' + this.omitMessageId, text: "Remind me again next time"
+    }).appendTo(showMessageElem);
+    var arrowElem = document.createElement('div');
+    arrowElem.id = "aboutPlayer-arrow";
+    // add elements
+    containerElem.appendChild(showMessageElem);
+    containerElem.appendChild(titleElem);
+    containerElem.appendChild(arrowElem);
+    self.messageContainer = containerElem;
+    self.createCloseButton();
+    paella.player.paused().then(function (isPausedFirst) {
+      // The isPaused is not reliable here during startup. Waiting another second cycle...
+      paella.player.paused().then(function (isPaused) {
+        if (! isPaused) {
+          paella.player.pause();
+          self.didPause = true;
+        }
+        self.isActive = true;
+        $(".showInfoPluginButton").trigger('click');
+        $("#info-about-player").addClass("hover");
+        $("#info-about-player").after(self.messageContainer);
+        paella.events.bind(paella.events.play, function (event, params) {
+          if (self.isActive) {
+            self.onClose(self);
+          }
+        });
+      });
+    });
+  },
+  createCloseButton: function () {
+    if (this.messageContainer) {
+      var thisClass = this;
+      var closeButton = document.createElement('div');
+      this.messageContainer.appendChild(closeButton);
+      closeButton.className = 'paella_messageContainer_closeButton';
+      $(closeButton).click(function (event) {
+        thisClass.onClose(thisClass);
+      });
+    }
+  },
+  onClose: function (self) {
+    if (self.isActive) {
+      self.isActive = false;
+      if (! $('#cb-' + self.omitMessageId).is(':checked')) {
+        base.cookies.set(self.getCookieName(), true);
+      }
+      if (self.didPause) {
+        paella.player.play();
+        self.didPause = false;
+      }
+      $(self.messageContainer).remove();
+      $("#info-about-player").removeClass('hover');
+      $(".showInfoPluginButton").trigger('click');
+    }
+  }
+
+});
+paella.plugins.showAboutPlayerMessage = new paella.plugins.ShowAboutPlayerMessage();

vendor/plugins/edu.harvard.dce.paella.showAboutPlayerMessage/showAboutPlayerMessage.less

@@ -0,0 +1,75 @@
+/** #DCE style for showAboutPlayerMessage plugin */
+
+/** Put help popup behind help menu the popup */
+
+.buttonPluginPopUp.showInfoPluginButton {
+  position:absolute;
+}
+
+#dce-info-popup {
+  position: relative;
+  z-index: 10;
+}
+
+#dce-info-popup > div {
+  position: inherit;
+  z-index: inherit;
+}
+
+#dce-info-popup > #aboutPlayer-container {
+  position: absolute;
+  z-index: 5;
+  left: -180px;
+  height: 280px;
+  width: 320px;
+  bottom: -10px;
+  background-color: #a51c30;
+  border-radius: 10px;
+  border-radius: 260px 20px 20px 10px;
+  padding-top: 40px;
+  padding-left: 120px;
+}
+
+#aboutPlayer-aboutLink {
+  width: 309px;
+  height: 249px;
+  cursor: pointer;
+  background: black url(../style/aboutPlayerLink.jpg) no-repeat;
+  background-position: center;
+  margin: auto;
+}
+
+#aboutPlayer-stopMessage, #aboutPlayer-title {
+  width: 100%;
+  height: 20px;
+  margin: 5px;
+  padding-top: 7px;
+  padding-left: 5px;
+}
+
+#aboutPlayer-title {
+  font-weight: bold;
+  font-size: 1.3em;
+}
+
+#aboutPlayer-stopMessage label {
+  font-weight: normal;
+  margin-left: 5px;
+  font-size: 1.1em;
+}
+
+.infoItemButton.help-hover {
+  background-color: #555;
+}
+
+#aboutPlayer-arrow {
+  border: none;
+  position: relative;
+  top: 20px;
+  left: -45px;
+  width: 75px;
+  height: 90px;
+  background-image: url(PlayerHelpPopupArrow.png);
+  background-repeat: no-repeat;
+  background-size: contain;
+}

vendor/plugins/edu.harvard.dce.paella.showInfoOverlay/showInfoOverlay.js

@@ -0,0 +1,130 @@
+// #DCE MATT-2548 v0.5 Overlay on player start that 
+// shows where all (currently active) nav buttons are in one
+// overlay. Overlay images can be clicked/hovered to
+// provide more details about each nav button.
+// Includes option to omit the overlay on future page loads (via cookie)
+"use strict";
+Class ("paella.plugins.ShowInfoOverlay", paella.DeferredLoadPlugin, {
+  omitOverayCookie: "hudce-omitInfoOverlay",
+  omitOverlayId: "infoOverlay-stopOverlay",
+  overlayContainerId: "infoOverlay-container",
+  overlayContainer: null,
+  overlayInfoButtons: [],
+  firstLoad: true,
+  cookieValue: null,
+  isActive: false,
+  didPause: false,
+  type: 'vod', // Video On Demand as default overlay type, 'live' is the other option
+  getName: function () {
+    return "edu.harvard.dce.paella.showInfoOverlay";
+  },
+  // The plugin is loaded by the plugin manager
+  load: function () {
+    var self = this;
+    // The user has to omit for live and vod separately
+    // The user will get overlay both times (more active buttons during a vod)
+    self.type = paella.player.isLiveStream() ? "live": "vod";
+    // Omit showing overlay if the omit cookie is set.
+    self.cookieValue = base.cookies.get(self.getCookieName());
+    if (! self.cookieValue) {
+      self.doShow();
+    }
+  },
+  // 
+  doShow: function () {
+    var self = this;
+    // only show overlay once per page load!
+    if (! self.firstLoad) return;
+    self.firstLoad = false;
+    self.type = paella.player.isLiveStream() ? "live": "vod";
+    self.cookieValue = base.cookies.get(self.getCookieName());
+    if (! self.cookieValue) {
+      self.buildAndDisplayOverlay();
+      // Note: Live streams can not be paused
+      if (self.type == "vod") {
+        paella.events.trigger(paella.events.pause);
+      }
+    }
+  },
+  getCookieName: function () {
+    return this.omitOverlayCookie + "-" + this.type;
+  },
+
+  buildAndDisplayOverlay: function () {
+    var self = this;
+    // TODO: Build the overlay container... use or discard these constructors
+    var containerElem = document.createElement('div');
+    containerElem.id = self.showInfoContainerId;
+    var titleElem = document.createElement('div');
+    titleElem.id = this.showInfoTitleId;
+    titleElem.innerHTML = "PLAYER INFORMATION";
+    var showOverlayElem = document.createElement('div');
+    showOverlayElem.id = this.omitOverlayId;
+    // These let the user omit the overlay from showing again
+    $('<input />', {
+      type: 'checkbox', id: 'cb-' + this.omitOverlayId, value: 'cb-' + this.omitOverlayId, checked: "checked"
+    }).appendTo(showOverlayElem);
+    $('<label />', {
+      'for': 'cb-' + this.omitOverlayId, text: "Remind me again next time"
+    }).appendTo(showOverlayElem);
+
+    // TODO: Build the container contents... use or discard these constructors
+    containerElem.appendChild(showOverlayElem);
+    containerElem.appendChild(titleElem);
+    containerElem.appendChild(arrowElem);
+    self.overlayContainer = containerElem;
+    self.createCloseButton();
+    // TODO:  query the plugin manager to find active player control buttons.
+    // Query the button plugins directly to get button details.
+
+    paella.player.paused().then(function (isPausedFirst) {
+      // The isPaused is not reliable in the inital round of player load. Waiting a second cycle...
+      paella.player.paused().then(function (isPaused) {
+        if (! isPaused) {
+          paella.player.pause();
+          self.didPause = true;
+        }
+        self.isActive = true;
+        // TODO: Safe to make overlay container visible now
+        //  ...
+        // Adding event to dismiss overlay if user tries to play video.
+        paella.events.bind(paella.events.play, function (event, params) {
+          if (self.isActive) {
+            self.onClose(self);
+          }
+        });
+      });
+    });
+  },
+  // Add a visual close button for Overlay
+  createCloseButton: function () {
+    if (this.overlayContainer) {
+      var thisClass = this;
+      var closeButton = document.createElement('div');
+      this.overlayContainer.appendChild(closeButton);
+      closeButton.className = 'paella_overlayContainer_closeButton';
+      $(closeButton).click(function (event) {
+        thisClass.onClose(thisClass);
+      });
+    }
+  },
+  // When dismissing the overlay
+  // - Set an omit cookie if user does not want to see overlay again.
+  // - Take the player out of paused if it was playing before overlay.
+  onClose: function (self) {
+    if (self.isActive) {
+      self.isActive = false;
+      if (! $('#cb-' + self.omitOverlayId).is(':checked')) {
+        base.cookies.set(self.getCookieName(), true);
+      }
+      if (self.didPause) {
+        paella.player.play();
+        self.didPause = false;
+      }
+      // If needed..
+      $(self.overlayContainer).remove();
+    }
+  }
+
+});
+paella.plugins.showInfoOverlay = new paella.plugins.ShowInfoOverlay();

vendor/plugins/edu.harvard.dce.paella.showInfoOverlay/showInfoOverlay.less

@@ -0,0 +1 @@
+/** #DCE style for showPlayerInfoOverlay plugin */