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.showAboutPlayerMessage": {
+        "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;
+}