From 358fecdd669e63ca6dc5967711478fe4f4bc4671 Mon Sep 17 00:00:00 2001 From: Johan Mynhardt Date: Fri, 6 Oct 2017 11:58:44 +0200 Subject: [PATCH 1/4] Allow displaying all available downloads. Specify 'allDownloads: true' in the options when configuring the plugin. For example: player.downloadButton({text: 'Download me!', allDownloads: true}) --- index.html | 2 +- src/plugin.js | 51 +++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 38 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index f8ce883..3baba9c 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ diff --git a/src/plugin.js b/src/plugin.js index e2cd4c6..da9db4b 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -3,7 +3,8 @@ const ClickableComponent = videojs.getComponent('ClickableComponent'); // Default options for the plugin. const defaults = { - text: 'Download' + text: 'Download', + allDownloads: false }; /** @@ -25,20 +26,42 @@ const onPlayerReady = (player, options) => { player.addClass('vjs-download-button'); if (!player.controlBar.childNameIndex_.hasOwnProperty('DownloadButton')) { - let linkProps = { - className: buildCSSClass(), - href: player.currentSrc(), - title: options.text, - download: '' - }; - let linkAttrs = { - 'aria-live': 'polite', - 'aria-label': options.text - }; - player.controlBar.addChild(new ClickableComponent(this, { - el: ClickableComponent.prototype.createEl('a', linkProps, linkAttrs) - })); + if (options.allDownloads) { + let sources = player.el_.querySelectorAll('source'); + let linkProps = src => ({ + className: buildCSSClass(), + href: src.src, + title: `${options.text} (type: ${src.type})`, + download: '' + }); + + let linkAttrs = src => ({ + 'aria-live': 'polite', + 'aria-label': `${options.text} (type: ${src.type})` + }); + + sources.forEach(source => { + player.controlBar.addChild(new ClickableComponent(this, { + el: ClickableComponent.prototype.createEl('a', linkProps(source), linkAttrs(source)) + })); + }); + } else { + let linkProps = { + className: buildCSSClass(), + href: player.currentSrc(), + title: options.text, + download: '' + }; + let linkAttrs = { + 'aria-live': 'polite', + 'aria-label': options.text + }; + + player.controlBar.addChild(new ClickableComponent(this, { + el: ClickableComponent.prototype.createEl('a', linkProps, linkAttrs) + })); + } } }; From 6793007497510d5b3e1ec847f17b148273dcd1c7 Mon Sep 17 00:00:00 2001 From: Johan Mynhardt Date: Fri, 6 Oct 2017 12:09:35 +0200 Subject: [PATCH 2/4] Update test bundle and dist sources. --- dist/videojs-download-button.css | 4 +- dist/videojs-download-button.js | 70 +++++++++++++++++++++-------- dist/videojs-download-button.min.js | 6 +-- es5/plugin.js | 59 +++++++++++++++++------- test/dist/bundle.js | 65 ++++++++++++++++++--------- 5 files changed, 145 insertions(+), 59 deletions(-) diff --git a/dist/videojs-download-button.css b/dist/videojs-download-button.css index 66a7754..fbcbb76 100644 --- a/dist/videojs-download-button.css +++ b/dist/videojs-download-button.css @@ -1,7 +1,7 @@ /** * videojs-download-button - * @version 0.0.1 - * @copyright 2016 Mikhail Khazov mikhail.khazov@gmail.com + * @version 0.1.0 + * @copyright 2017 Mikhail Khazov mikhail.khazov@gmail.com * @license MIT */ .video-js .vjs-download-button-control{width:14px;height:100%;margin:0 1em;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTQgMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDE0IDEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj4uc3Qwe2ZpbGw6I2ZmZmZmZjt9PC9zdHlsZT48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEyLDkgMTIsMTEgMiwxMSAyLDkgMCw5IDAsMTMgMTQsMTMgMTQsOSAiLz48cG9seWdvbiBjbGFzcz0ic3QwIiBwb2ludHM9IjEwLDMuNiA4LDUuNiA4LDAgNiwwIDYsNS42IDQsMy42IDIuNiw1IDcsOS40IDExLjQsNSAiLz48L3N2Zz4=) 0 50% no-repeat} diff --git a/dist/videojs-download-button.js b/dist/videojs-download-button.js index 6e18a6c..2d79bb0 100644 --- a/dist/videojs-download-button.js +++ b/dist/videojs-download-button.js @@ -1,3 +1,9 @@ +/** + * videojs-download-button + * @version 0.1.0 + * @copyright 2017 Mikhail Khazov mikhail.khazov@gmail.com + * @license MIT + */ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.videojsDownloadButton = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o Date: Mon, 9 Oct 2017 09:12:01 +0200 Subject: [PATCH 3/4] Refactor out duplicated code and use player.currentSources(). When allDownloads is not requested, source is an array containing a single object created from player.currentSrc() and player.currentType(). This allows using the same code whether a single download or all downloads are used for creating a Download button. --- src/plugin.js | 50 ++++++++++++++++++++------------------------------ 1 file changed, 20 insertions(+), 30 deletions(-) diff --git a/src/plugin.js b/src/plugin.js index da9db4b..feb3cf9 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -27,41 +27,31 @@ const onPlayerReady = (player, options) => { if (!player.controlBar.childNameIndex_.hasOwnProperty('DownloadButton')) { - if (options.allDownloads) { - let sources = player.el_.querySelectorAll('source'); - let linkProps = src => ({ - className: buildCSSClass(), - href: src.src, - title: `${options.text} (type: ${src.type})`, - download: '' - }); + let label = (src) => (options.allDownloads + ? `${options.text} (type: ${src.type})` + : options.text); - let linkAttrs = src => ({ - 'aria-live': 'polite', - 'aria-label': `${options.text} (type: ${src.type})` - }); + let sources = options.allDownloads + ? player.currentSources() + : [{src: player.currentSrc(), type: player.currentType()}]; - sources.forEach(source => { - player.controlBar.addChild(new ClickableComponent(this, { - el: ClickableComponent.prototype.createEl('a', linkProps(source), linkAttrs(source)) - })); - }); - } else { - let linkProps = { - className: buildCSSClass(), - href: player.currentSrc(), - title: options.text, - download: '' - }; - let linkAttrs = { - 'aria-live': 'polite', - 'aria-label': options.text - }; + let linkProps = src => ({ + className: buildCSSClass(), + href: src.src, + title: label(src), + download: '' + }); + let linkAttrs = src => ({ + 'aria-live': 'polite', + 'aria-label': label(src) + }); + + sources.forEach(source => { player.controlBar.addChild(new ClickableComponent(this, { - el: ClickableComponent.prototype.createEl('a', linkProps, linkAttrs) + el: ClickableComponent.prototype.createEl('a', linkProps(source), linkAttrs(source)) })); - } + }); } }; From 0c0a2c2ed87673fa79ea3fe64cf2a34f8dad4243 Mon Sep 17 00:00:00 2001 From: Johan Mynhardt Date: Mon, 9 Oct 2017 09:14:30 +0200 Subject: [PATCH 4/4] Update test bundle and dist resources. --- dist/videojs-download-button.js | 60 ++++++++++++----------------- dist/videojs-download-button.min.js | 2 +- es5/plugin.js | 60 ++++++++++++----------------- test/dist/bundle.js | 60 ++++++++++++----------------- 4 files changed, 73 insertions(+), 109 deletions(-) diff --git a/dist/videojs-download-button.js b/dist/videojs-download-button.js index 2d79bb0..4866471 100644 --- a/dist/videojs-download-button.js +++ b/dist/videojs-download-button.js @@ -45,48 +45,36 @@ var onPlayerReady = function onPlayerReady(player, options) { player.addClass('vjs-download-button'); if (!player.controlBar.childNameIndex_.hasOwnProperty('DownloadButton')) { + (function () { - if (options.allDownloads) { - (function () { - var sources = player.el_.querySelectorAll('source'); - var linkProps = function linkProps(src) { - return { - className: buildCSSClass(), - href: src.src, - title: options.text + ' (type: ' + src.type + ')', - download: '' - }; - }; + var label = function label(src) { + return options.allDownloads ? options.text + ' (type: ' + src.type + ')' : options.text; + }; - var linkAttrs = function linkAttrs(src) { - return { - 'aria-live': 'polite', - 'aria-label': options.text + ' (type: ' + src.type + ')' - }; - }; + var sources = options.allDownloads ? player.currentSources() : [{ src: player.currentSrc(), type: player.currentType() }]; - sources.forEach(function (source) { - player.controlBar.addChild(new ClickableComponent(undefined, { - el: ClickableComponent.prototype.createEl('a', linkProps(source), linkAttrs(source)) - })); - }); - })(); - } else { - var linkProps = { - className: buildCSSClass(), - href: player.currentSrc(), - title: options.text, - download: '' + var linkProps = function linkProps(src) { + return { + className: buildCSSClass(), + href: src.src, + title: label(src), + download: '' + }; }; - var linkAttrs = { - 'aria-live': 'polite', - 'aria-label': options.text + + var linkAttrs = function linkAttrs(src) { + return { + 'aria-live': 'polite', + 'aria-label': label(src) + }; }; - player.controlBar.addChild(new ClickableComponent(undefined, { - el: ClickableComponent.prototype.createEl('a', linkProps, linkAttrs) - })); - } + sources.forEach(function (source) { + player.controlBar.addChild(new ClickableComponent(undefined, { + el: ClickableComponent.prototype.createEl('a', linkProps(source), linkAttrs(source)) + })); + }); + })(); } }; diff --git a/dist/videojs-download-button.min.js b/dist/videojs-download-button.min.js index a786e84..f934076 100644 --- a/dist/videojs-download-button.min.js +++ b/dist/videojs-download-button.min.js @@ -4,4 +4,4 @@ * @copyright 2017 Mikhail Khazov mikhail.khazov@gmail.com * @license MIT */ -!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var o;o="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,o.videojsDownloadButton=e()}}(function(){return function e(o,t,n){function r(i,d){if(!t[i]){if(!o[i]){var a="function"==typeof require&&require;if(!d&&a)return a(i,!0);if(l)return l(i,!0);var f=new Error("Cannot find module '"+i+"'");throw f.code="MODULE_NOT_FOUND",f}var u=t[i]={exports:{}};o[i][0].call(u.exports,function(e){var t=o[i][1][e];return r(t||e)},u,u.exports,e,o,t,n)}return t[i].exports}for(var l="function"==typeof require&&require,i=0;i