ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use double quote for html strings

Browse Source
This commit is contained in:
Calvin Tam 2015-08-12 23:38:39 -07:00
parent 2f6dc5279b
commit 2bc53d12ea
1 changed files with 75 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

150
src/js/plyr.js
View File

@ -29,16 +29,16 @@
controls: ".player-controls", controls: ".player-controls",
labels: "[data-player] .sr-only, label .sr-only", labels: "[data-player] .sr-only, label .sr-only",
buttons: { buttons: {
seek: "[data-player='seek']", seek: '[data-player="seek"]',
play: "[data-player='play']", play: '[data-player="play"]',
pause: "[data-player='pause']", pause: '[data-player="pause"]',
restart: "[data-player='restart']", restart: '[data-player="restart"]',
rewind: "[data-player='rewind']", rewind: '[data-player="rewind"]',
forward: "[data-player='fast-forward']", forward: '[data-player="fast-forward"]',
mute: "[data-player='mute']", mute: '[data-player="mute"]',
volume: "[data-player='volume']", volume: '[data-player="volume"]',
captions: "[data-player='captions']", captions: '[data-player="captions"]',
fullscreen: "[data-player='fullscreen']" fullscreen: '[data-player="fullscreen"]'
}, },
progress: { progress: {
container: ".player-progress", container: ".player-progress",
@ -104,134 +104,134 @@
function _buildControls() { function _buildControls() {
// Open and add the progress and seek elements // Open and add the progress and seek elements
var html = [ var html = [
"<div class='player-controls'>", '<div class="player-controls">',
"<div class='player-progress'>", '<div class="player-progress">',
"<label for='seek{id}' class='sr-only'>Seek</label>", '<label for="seek{id}" class="sr-only">Seek</label>',
"<input id='seek{id}' class='player-progress-seek' type='range' min='0' max='100' step='0.5' value='0' data-player='seek'>", '<input id="seek{id}" class="player-progress-seek" type="range" min="0" max="100" step="0.5" value="0" data-player="seek">',
"<progress class='player-progress-played' max='100' value='0'>", '<progress class="player-progress-played" max="100" value="0">',
"<span>0</span>% " + config.i18n.played, '<span>0</span>% ' + config.i18n.played,
"</progress>", '</progress>',
"<progress class='player-progress-buffer' max='100' value='0'>", '<progress class="player-progress-buffer" max="100" value="0">',
"<span>0</span>% " + config.i18n.buffered, '<span>0</span>% ' + config.i18n.buffered,
"</progress>", '</progress>',
"</div>", '</div>',
"<span class='player-controls-left'>"]; '<span class="player-controls-left">'];
// Restart button // Restart button
if (_inArray(config.controls, "restart")) { if (_inArray(config.controls, "restart")) {
html.push( html.push(
"<button type='button' data-player='restart'>", '<button type="button" data-player="restart">',
"<svg><use xlink:href='#" + config.iconPrefix + "-restart'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-restart"></use></svg>',
"<span class='sr-only'>" + config.i18n.restart + "</span>", '<span class="sr-only">' + config.i18n.restart + '</span>',
"</button>" '</button>'
); );
} }
// Rewind button // Rewind button
if (_inArray(config.controls, "rewind")) { if (_inArray(config.controls, "rewind")) {
html.push( html.push(
"<button type='button' data-player='rewind'>", '<button type="button" data-player="rewind">',
"<svg><use xlink:href='#" + config.iconPrefix + "-rewind'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-rewind"></use></svg>',
"<span class='sr-only'>" + config.i18n.rewind + "</span>", '<span class="sr-only">' + config.i18n.rewind + '</span>',
"</button>" '</button>'
); );
} }
// Play/pause button // Play/pause button
if (_inArray(config.controls, "play")) { if (_inArray(config.controls, "play")) {
html.push( html.push(
"<button type='button' data-player='play'>", '<button type="button" data-player="play">',
"<svg><use xlink:href='#" + config.iconPrefix + "-play'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-play"></use></svg>',
"<span class='sr-only'>" + config.i18n.play + "</span>", '<span class="sr-only">' + config.i18n.play + '</span>',
"</button>", '</button>',
"<button type='button' data-player='pause'>", '<button type="button" data-player="pause">',
"<svg><use xlink:href='#" + config.iconPrefix + "-pause'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-pause"></use></svg>',
"<span class='sr-only'>" + config.i18n.pause + "</span>", '<span class="sr-only">' + config.i18n.pause + '</span>',
"</button>" '</button>'
); );
} }
// Fast forward button // Fast forward button
if (_inArray(config.controls, "fast-forward")) { if (_inArray(config.controls, "fast-forward")) {
html.push( html.push(
"<button type='button' data-player='fast-forward'>", '<button type="button" data-player="fast-forward">',
"<svg><use xlink:href='#" + config.iconPrefix + "-fast-forward'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-fast-forward"></use></svg>',
"<span class='sr-only'>" + config.i18n.forward + "</span>", '<span class="sr-only">' + config.i18n.forward + '</span>',
"</button>" '</button>'
); );
} }
// Media current time display // Media current time display
if (_inArray(config.controls, "current-time")) { if (_inArray(config.controls, "current-time")) {
html.push( html.push(
"<span class='player-time'>", '<span class="player-time">',
"<span class='sr-only'>" + config.i18n.currentTime + "</span>", '<span class="sr-only">' + config.i18n.currentTime + '</span>',
"<span class='player-current-time'>00:00</span>", '<span class="player-current-time">00:00</span>',
"</span>" '</span>'
); );
} }
// Media duration display // Media duration display
if (_inArray(config.controls, "duration")) { if (_inArray(config.controls, "duration")) {
html.push( html.push(
"<span class='player-time'>", '<span class="player-time">',
"<span class='sr-only'>" + config.i18n.duration + "</span>", '<span class="sr-only">' + config.i18n.duration + '</span>',
"<span class='player-duration'>00:00</span>", '<span class="player-duration">00:00</span>',
"</span>" '</span>'
); );
} }
// Close left controls // Close left controls
html.push( html.push(
"</span>", '</span>',
"<span class='player-controls-right'>" '<span class="player-controls-right">'
); );
// Toggle mute button // Toggle mute button
if (_inArray(config.controls, "mute")) { if (_inArray(config.controls, "mute")) {
html.push( html.push(
"<button type='button' data-player='mute'>", '<button type="button" data-player="mute">',
"<svg class='icon-muted'><use xlink:href='#" + config.iconPrefix + "-muted'></use></svg>", '<svg class="icon-muted"><use xlink:href="#' + config.iconPrefix + '-muted"></use></svg>',
"<svg><use xlink:href='#" + config.iconPrefix + "-volume'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-volume"></use></svg>',
"<span class='sr-only'>" + config.i18n.toggleMute + "</span>", '<span class="sr-only">' + config.i18n.toggleMute + '</span>',
"</button>" '</button>'
); );
} }
// Volume range control // Volume range control
if (_inArray(config.controls, "volume")) { if (_inArray(config.controls, "volume")) {
html.push( html.push(
"<label for='volume{id}' class='sr-only'>" + config.i18n.volume + "</label>", '<label for="volume{id}" class="sr-only">' + config.i18n.volume + '</label>',
"<input id='volume{id}' class='player-volume' type='range' min='0' max='10' value='5' data-player='volume'>" '<input id="volume{id}" class="player-volume" type="range" min="0" max="10" value="5" data-player="volume">'
); );
} }
// Toggle captions button // Toggle captions button
if (_inArray(config.controls, "captions")) { if (_inArray(config.controls, "captions")) {
html.push( html.push(
"<button type='button' data-player='captions'>", '<button type="button" data-player="captions">',
"<svg class='icon-captions-on'><use xlink:href='#" + config.iconPrefix + "-captions-on'></use></svg>", '<svg class="icon-captions-on"><use xlink:href="#' + config.iconPrefix + '-captions-on"></use></svg>',
"<svg><use xlink:href='#" + config.iconPrefix + "-captions-off'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-captions-off"></use></svg>',
"<span class='sr-only'>" + config.i18n.toggleCaptions + "</span>", '<span class="sr-only">' + config.i18n.toggleCaptions + '</span>',
"</button>" '</button>'
); );
} }
// Toggle fullscreen button // Toggle fullscreen button
if (_inArray(config.controls, "fullscreen")) { if (_inArray(config.controls, "fullscreen")) {
html.push( html.push(
"<button type='button' data-player='fullscreen'>", '<button type="button" data-player="fullscreen">',
"<svg class='icon-exit-fullscreen'><use xlink:href='#" + config.iconPrefix + "-exit-fullscreen'></use></svg>", '<svg class="icon-exit-fullscreen"><use xlink:href="#' + config.iconPrefix + '-exit-fullscreen"></use></svg>',
"<svg><use xlink:href='#" + config.iconPrefix + "-enter-fullscreen'></use></svg>", '<svg><use xlink:href="#' + config.iconPrefix + '-enter-fullscreen"></use></svg>',
"<span class='sr-only'>" + config.i18n.toggleFullscreen + "</span>", '<span class="sr-only">' + config.i18n.toggleFullscreen + '</span>',
"</button>" '</button>'
); );
} }
// Close everything // Close everything
html.push( html.push(
"</span>", '</span>',
"</div>" '</div>'
); );
return html.join(""); return html.join("");
@ -346,7 +346,7 @@
// Inject a script // Inject a script
function _injectScript(source) { function _injectScript(source) {
if (document.querySelectorAll("script[src='" + source + "']").length) { if (document.querySelectorAll('script[src="' + source + '"]').length) {
return; return;
} }
@ -777,7 +777,7 @@
// Inputs // Inputs
player.buttons.mute = _getElement(config.selectors.buttons.mute); player.buttons.mute = _getElement(config.selectors.buttons.mute);
player.buttons.captions = _getElement(config.selectors.buttons.captions); player.buttons.captions = _getElement(config.selectors.buttons.captions);
player.checkboxes = _getElements("[type='checkbox']"); player.checkboxes = _getElements('[type="checkbox"]');
// Progress // Progress
player.progress = {}; player.progress = {};
@ -882,7 +882,7 @@
// Setup YouTube // Setup YouTube
function _setupYouTube(id) { function _setupYouTube(id) {
// Remove old containers // Remove old containers
var containers = _getElements("[id^='youtube']"); var containers = _getElements('[id^="youtube"]');
for (var i = containers.length - 1; i >= 0; i--) { for (var i = containers.length - 1; i >= 0; i--) {
_remove(containers[i]); _remove(containers[i]);
} }
@ -1028,7 +1028,7 @@
function _setupCaptions() { function _setupCaptions() {
if (player.type === "video") { if (player.type === "video") {
// Inject the container // Inject the container
player.videoContainer.insertAdjacentHTML("afterbegin", "<div class='" + config.selectors.captions.replace(".", "") + "'><span></span></div>"); player.videoContainer.insertAdjacentHTML("afterbegin", '<div class="' + config.selectors.captions.replace(".", "") + '"><span></span></div>');
// Cache selector // Cache selector
player.captionsContainer = _getElement(config.selectors.captions).querySelector("span"); player.captionsContainer = _getElement(config.selectors.captions).querySelector("span");