-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
MATT-2548 Help About-player popup with cookie
- Loading branch information
Karen Dolan
committed
Oct 22, 2018
1 parent
bdaf920
commit 2774588
Showing
7 changed files
with
194 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
vendor/plugins/edu.harvard.dce.paella.infoButtonPlugin/dce_infobutton.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
|
||
.buttonPlugin.showInfoPluginButton { | ||
background-position: -800% -200%; | ||
} | ||
|
Binary file added
BIN
+8.1 KB
...du.harvard.dce.paella.showAboutPlayerMessage/resources/PlayerHelpPopupArrow.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+26.7 KB
...ins/edu.harvard.dce.paella.showAboutPlayerMessage/resources/aboutPlayerLink.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 114 additions & 0 deletions
114
vendor/plugins/edu.harvard.dce.paella.showAboutPlayerMessage/showAboutPlayerMessage.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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(); |
75 changes: 75 additions & 0 deletions
75
vendor/plugins/edu.harvard.dce.paella.showAboutPlayerMessage/showAboutPlayerMessage.less
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |