├── .gitignore
├── tests
    ├── BeBopAliens.mp3
    ├── BeBopAliens.ogg
    ├── README.md
    ├── tests.html
    ├── runner.js
    ├── tests.js
    └── .jshintrc
├── screenshots
    ├── bPlayer_demo_data_0.png
    ├── bPlayer_demo_data_1.png
    └── bPlayer_demo_data_no.png
├── css
    └── bootstrap3_player.css
├── CHANGES.md
├── README.md
├── index.html
├── js
    ├── .jshintrc
    └── bootstrap3_player.js
└── LICENSE


/.gitignore:
--------------------------------------------------------------------------------
1 | *.sublime-workspace
2 | *.sublime-project
3 | .DS_Store
4 | *~
5 | js/node_modules/
6 | 


--------------------------------------------------------------------------------
/tests/BeBopAliens.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iainhouston/bootstrap3_player/HEAD/tests/BeBopAliens.mp3


--------------------------------------------------------------------------------
/tests/BeBopAliens.ogg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iainhouston/bootstrap3_player/HEAD/tests/BeBopAliens.ogg


--------------------------------------------------------------------------------
/screenshots/bPlayer_demo_data_0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iainhouston/bootstrap3_player/HEAD/screenshots/bPlayer_demo_data_0.png


--------------------------------------------------------------------------------
/screenshots/bPlayer_demo_data_1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iainhouston/bootstrap3_player/HEAD/screenshots/bPlayer_demo_data_1.png


--------------------------------------------------------------------------------
/screenshots/bPlayer_demo_data_no.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/iainhouston/bootstrap3_player/HEAD/screenshots/bPlayer_demo_data_no.png


--------------------------------------------------------------------------------
/tests/README.md:
--------------------------------------------------------------------------------
 1 | Testing notes:
 2 | -----------
 3 | 
 4 | -  ~~Run tests in ECMAScript 6-compatible browser e.g. Firefox 34 or later~~ Tests run in Moz and WebKit browsers. There were significant differences seen in the behaviour of asynchronous actions. Tests refactored to avoid these differences. 
 5 | -  [FuncUnit testing library](http://funcunit.com/index.html) is used for Functional Tests with waits for asynchrous events e.g. round trip from mute button -> audio element action -> event listener on volume slider etc.
 6 | -  FuncUnit adds  to [QUnit](http://api.qunitjs.com/)'s more basic async support.
 7 | -  Not all real User interactions behave the same as FuncUnit actions. Clicking the play button, for example, doesn't have exactly the same effect  in both cases.
 8 | -  Even so. We can build a suite of tests sufficient to satisfy ourselves that the styling changes we made did not adversely impact the Javascript functionality.
 9 | -  Don't test include player html in `#qunit-fixture`  when running FuncUnit tests. i.e. Our test script consists of just one Functional Test with FuncUnit vs lots of atomic Unit Tests with QUnit.
10 | -  The test files BeBopAliens.ogg and BeBopAliens.mp3 are my original work and available to you under [Creative Commens Licence 0](http://creativecommons.org/about/cc0)
11 | 


--------------------------------------------------------------------------------
/css/bootstrap3_player.css:
--------------------------------------------------------------------------------
 1 | .playa input[type="range"] {  
 2 |   background-color: #ddd;
 3 |   border: 1px solid #bbb;
 4 |   border-radius: 0.5em;
 5 |   opacity: 0.5;
 6 |   height: 1em;
 7 |   top: 2px;
 8 |   position: relative;
 9 | }
10 | 
11 | .playa  .thumbnail  {
12 |     width:100%;
13 | }
14 | 
15 | /* sliders and buttons need a uniform height */
16 | .playa .btn-group .btn {
17 |     display:inline-block;
18 |     float:none;
19 |     height: 2.2em;
20 | }
21 | 
22 | /*  contains the attribution link */
23 | .playa .row:nth-child(4) { 
24 |   overflow: hidden;
25 | }
26 | 
27 | /* Acknowledgements:
28 | To Glyphicons (http://glyphicons.com/) for the Halflings glyphs font */
29 | 
30 | /* .spin is used to rotate glyphicon glyphicon-refresh */
31 | .spin {
32 |   -webkit-animation: spin 2s infinite linear;
33 |   -moz-animation: spin 2s infinite linear;
34 |   -o-animation: spin 2s infinite linear;
35 |   animation: spin 2s infinite linear;
36 | }
37 | 
38 | @-moz-keyframes spin {
39 |   from {
40 |     -moz-transform: rotate(0deg);
41 |   }
42 |   to {
43 |     -moz-transform: rotate(360deg);
44 |   }
45 | }
46 | 
47 | @-webkit-keyframes spin {
48 |   from {
49 |     -webkit-transform: rotate(0deg);
50 |   }
51 |   to {
52 |     -webkit-transform: rotate(360deg);
53 |   }
54 | }
55 | 
56 | @keyframes spin {
57 |   from {
58 |     transform: rotate(0deg);
59 |   }
60 |   to {
61 |     transform: rotate(360deg);
62 |   }
63 | }
64 | 


--------------------------------------------------------------------------------
/tests/tests.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>QUnit test bootstrap3_player</title>
 6 |   <!-- protocol scheme included so that `file:` default is not used locally -->
 7 |   <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">    
 8 |   <link href="../css/bootstrap3_player.css" rel="stylesheet">
 9 |   <link href="http://code.jquery.com/qunit/qunit-1.16.0.css" rel="stylesheet">
10 | </head>
11 | <body>
12 |   <div id="qunit"></div>
13 |   <div id="qunit-fixture">
14 |   </div><!-- /qunit-fixture (don't enclose audio when running FuncUnit) -->
15 |     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Audio with no additional data ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
16 |     <audio controls>
17 |       <!-- local audio files to avoid too much latency in QUnit test -->
18 |       <source src="BeBopAliens.ogg" type="audio/ogg" />
19 |       <source src="BeBopAliens.mp3" type="audio/mpeg" />
20 |       <a href="http://www.w3schools.com/html/horse.mp3">horse</a>
21 |       An html5-capable browser is required to play this audio. 
22 |     </audio>
23 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
24 |   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
25 |   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
26 |   <script src="../js/bootstrap3_player.js"></script>
27 |   <script src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
28 |   <script src="tests.js"></script>
29 |   <script src="funcunit.js"></script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/CHANGES.md:
--------------------------------------------------------------------------------
 1 | ### Main differences between `bootstrap-player` and `bootstrap3_player`
 2 | 
 3 | #### Reduced dependencies
 4 | 
 5 | - `html5slider.js` no longer required since Firefox 23 (it's now at 34 at this time of writing)
 6 | - Font Awesome no longer required thanks to [Glyphicons](http://glyphicons.com/) for the Halflings glyphs font that comes free of cost with Bootstrap 3
 7 | 
 8 | #### <a name="cdiff"></a>CSS differences
 9 | 
10 | - Reduced custom css: greater reliance on Bootstrap 3 component styling; particularly buttons and button groups. 
11 | - Bootstrap 3 classes replace many Bootstrap 2 classes. Notably:  
12 |         -   `span*` => `col-sm-*`    
13 |         -   `.disabled`  => opaque property on `input[type="range"]`.  
14 |         (`.disabled` disables the sliders as well as styling them opaquely)  
15 |         -   `.icon-spin` => `glyphicon glyphicon-refresh spin`  
16 |         -   `collapsing` introduced
17 | -  `.spin` class introduced to apply rotation keyframes to `glyphicon-refresh`
18 | -  seek and volume slider controls hidden on xs viewports. This is not entirely satisfactory as the controls are jumbled when the player's container is styled narrow on the web page rather than just being viewed on a narrow device.
19 | 
20 | #### Javascript differences
21 | 
22 | -  Functionality of William Randol's [bootstrap-player](https://github.com/WilliamRandol/bootstrap-player) not changed 
23 | -  Changes only made to incorporate [CSS Differences](#cdiff)
24 | -  Program statements indented per jslint / jshint for future readers
25 | -  A very few comments added for the benefit of future readers 
26 | 
27 | #### Live demo
28 | 
29 | -  Bootstrap 3 grid classes:  
30 |     -  absolutely addressed links to external files used in the demo  
31 |     -  redundant css and js links removed
32 | -  `index.html` is all the "how to" documenntation really required. Please raise an issue if I am wrong.
33 | 
34 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | bootstrap3_player
 2 | ================
 3 | 
 4 | An HTML5 Audio Player Skin For Twitter Bootstrap 3
 5 | 
 6 | #### Requires:
 7 | 
 8 |   * Twitter Bootstrap 3 - http://twitter.github.com/bootstrap/
 9 |   * jQuery - http://jquery.com/
10 | 
11 | #### How to use
12 | 
13 | Clone or download this repo; then open the included [`index.html`](index.html) file: 
14 | -  with **your browser** to:  
15 |     -  see a live demo on your local machine 
16 |     -  compare it with the [screenshots or live demo](#screenshots) below
17 | - with your [text editor](index.html) to:
18 |     -  see all the css and js files you need to link to
19 |     -  see the `<audio>`  tags in use
20 | 
21 | #### Styling caveat
22 | 
23 | Works best when the player is not enclosed in too narrow a container in your page otherwise the player controls can appear jumbled. Both the seek and volume sliders are hidden on narrow (xs) viewports. A good strategy is to start "mobile-first" as usual by enclosing your audio block in a row that uses all twelve grid colums of the page's outer container in an xs viewport. Then, on wider viewports, the player can occupy fewer of the page's grid columns. See the example row widths in  [`index.html`](index.html) and the corresponding [live demo](http://playerdemo.iainhouston.com).   
24 | 
25 | ##### Forked from William Randol's [bootstrap-player](https://github.com/WilliamRandol/bootstrap-player)
26 | 
27 |  -  `bootstrap-player` is great for Bootstrap 2
28 |  -  All the functionality of William Randol's player is preserved   
29 |  (QUnit / FuncUnit test suite in progress :waxing_crescent_moon:)
30 |  -  `bootstrap3_player` updates the styling of `bootstrap-player`; has fewer dependencies; uses Bootstrap 3
31 | 
32 | For some info on the differences between `bootstrap-player` and `bootstrap3_player`, [see here.](CHANGES.md)
33 | 
34 | 
35 | #### <a name="screenshots">Screenshots and Live demo
36 | 
37 | [See a live demo](http://playerdemo.iainhouston.com)
38 | 
39 | -  Audio with no additional data ![](screenshots/bPlayer_demo_data_no.png?raw=true)
40 | 
41 | -  Audio with data - collapsed ![](screenshots/bPlayer_demo_data_0.png?raw=true)
42 | 
43 | -  Audio with data - expanded ![](screenshots/bPlayer_demo_data_1.png?raw=true)
44 | 
45 | 
46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>bootstrap3_player demo</title>
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 
 7 |     <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ Required CSS files ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 8 |     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">    
 9 |     <link href="css/bootstrap3_player.css" rel="stylesheet">
10 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
11 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
12 | 
13 |   </head>
14 |   <body>
15 | 
16 | 
17 |     <div class="container">
18 |       <div class="jumbotron">
19 |         <h2>bootstrap3_player</h2>
20 |         <p><a href="https://github.com/iainhouston/bootstrap3_player/blob/master/index.html">index.html</a>
21 |          shows the very simple html needed to include bootstrap3_player in your page.</p>
22 |         <a role="button" class="btn btn-primary btn-lg" href="https://github.com/iainhouston/bootstrap3_player">
23 |           <span class="glyphicon glyphicon-download" aria-hidden="true"></span> GitHub
24 |       </a>
25 |       </div>
26 |       <!-- /jumbotron -->
27 |       <div class="row col-md-8 col-md-offset-2 col-xs-12">
28 | 
29 | 
30 | 
31 |         <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Example: Audio with data ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
32 |         <audio controls
33 |           data-info-album-art="https://farm9.staticflickr.com/8642/16106988340_058071cdbe_z.jpg"
34 |           data-info-album-title="8874"
35 |           data-info-artist="Iain Houston and Felix Gibbons"
36 |           data-info-title="BeBop Aliens"
37 |           data-info-label="Independent"
38 |           data-info-year="2005"
39 |           data-info-att="Music: Iain Houston and Felix Gibbons."
40 |           data-info-att-link="https://github.com/iainhouston">
41 |           <source src="http://playerdemo.iainhouston.com/tests/BeBopAliens.ogg" type="audio/ogg" />
42 |           <source src="http://playerdemo.iainhouston.com/tests/BeBopAliens.mp3" type="audio/mpeg" />
43 |           <a href="http://playerdemo.iainhouston.com/tests/BeBopAliens.mp3">BeBopAliens</a>
44 |           An html5-capable browser is required to play this audio. 
45 |         </audio>
46 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
47 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
48 | 
49 |       </div><!-- /row -->
50 |       <div class="row col-md-6 col-md-offset-3 col-xs-12">
51 | 
52 |         <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Example: Audio with no additional data ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
53 |         <audio controls>
54 |           <source src="http://www.w3schools.com/html/horse.ogg" type="audio/ogg" />
55 |           <source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg" />
56 |           <a href="http://www.w3schools.com/html/horse.mp3">horse</a>
57 |           An html5-capable browser is required to play this audio. 
58 |         </audio>
59 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
60 |     <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
61 | 
62 | 
63 |       </div>
64 |       <!-- /row -->
65 |       <footer class="row col-md-6 col-md-offset-3 col-xs-12">
66 |         <div class="list-group">
67 |           <a  class="list-group-item" href="https://www.flickr.com/photos/13481006@N08/sets/72157650312130202/">
68 |           Dorset Image from  Iain Houston</a>     
69 |           <a  class="list-group-item" href="http://glyphicons.com/">
70 |           Glyphicons.com provide the Halflings glyphs font that comes free of cost with Bootstrap 3</a>
71 |         </div>
72 |         <!-- /list-group -->
73 |       </footer>
74 |       
75 | 
76 |       <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~ Required Javascript files ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
77 |       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
78 |       <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
79 |       <script src="js/bootstrap3_player.js"></script>
80 |       <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
81 |       <!-- ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^  -->
82 | 
83 | 
84 |     </div><!-- container -->
85 |   </body>
86 | </html>
87 | 


--------------------------------------------------------------------------------
/tests/runner.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * PhantomJS Runner QUnit Plugin 1.2.0
  3 |  *
  4 |  * PhantomJS binaries: http://phantomjs.org/download.html
  5 |  * Requires PhantomJS 1.6+ (1.7+ recommended)
  6 |  *
  7 |  * Run with:
  8 |  *   phantomjs runner.js [url-of-your-qunit-testsuite]
  9 |  *
 10 |  * e.g.
 11 |  *   phantomjs runner.js http://localhost/qunit/test/index.html
 12 |  */
 13 | 
 14 | /*global phantom:false, require:false, console:false, window:false, QUnit:false */
 15 | 
 16 | (function () {
 17 |     'use strict';
 18 | 
 19 |     var url, page, timeout,
 20 |         args = require('system').args;
 21 | 
 22 |     // arg[0]: scriptName, args[1...]: arguments
 23 |     if (args.length < 2 || args.length > 3) {
 24 |         console.error('Usage:\n  phantomjs runner.js [url-of-your-qunit-testsuite] [timeout-in-seconds]');
 25 |         phantom.exit(1);
 26 |     }
 27 | 
 28 |     url = args[1];
 29 |     page = require('webpage').create();
 30 |     if (args[2] !== undefined) {
 31 |         timeout = parseInt(args[2], 10);
 32 |     }
 33 | 
 34 |     // Route `console.log()` calls from within the Page context to the main Phantom context (i.e. current `this`)
 35 |     page.onConsoleMessage = function (msg) {
 36 |         console.log(msg);
 37 |     };
 38 | 
 39 |     page.onInitialized = function () {
 40 |         page.evaluate(addLogging);
 41 |     };
 42 | 
 43 |     page.onCallback = function (message) {
 44 |         var result,
 45 |             failed;
 46 | 
 47 |         if (message) {
 48 |             if (message.name === 'QUnit.done') {
 49 |                 result = message.data;
 50 |                 failed = !result || !result.total || result.failed;
 51 | 
 52 |                 if (!result.total) {
 53 |                     console.error('No tests were executed. Are you loading tests asynchronously?');
 54 |                 }
 55 | 
 56 |                 phantom.exit(failed ? 1 : 0);
 57 |             }
 58 |         }
 59 |     };
 60 | 
 61 |     page.open(url, function (status) {
 62 |         if (status !== 'success') {
 63 |             console.error('Unable to access network: ' + status);
 64 |             phantom.exit(1);
 65 |         } else {
 66 |             // Cannot do this verification with the 'DOMContentLoaded' handler because it
 67 |             // will be too late to attach it if a page does not have any script tags.
 68 |             var qunitMissing = page.evaluate(function () {
 69 |                 return (typeof QUnit === 'undefined' || !QUnit);
 70 |             });
 71 |             if (qunitMissing) {
 72 |                 console.error('The `QUnit` object is not present on this page.');
 73 |                 phantom.exit(1);
 74 |             }
 75 | 
 76 |             // Set a timeout on the test running, otherwise tests with async problems will hang forever
 77 |             if (typeof timeout === 'number') {
 78 |                 setTimeout(function () {
 79 |                     console.error('The specified timeout of ' + timeout + ' seconds has expired. Aborting...');
 80 |                     phantom.exit(1);
 81 |                 }, timeout * 1000);
 82 |             }
 83 | 
 84 |             // Do nothing... the callback mechanism will handle everything!
 85 |         }
 86 |     });
 87 | 
 88 |     function addLogging() {
 89 |         window.document.addEventListener('DOMContentLoaded', function () {
 90 |             var currentTestAssertions = [];
 91 | 
 92 |             QUnit.log(function (details) {
 93 |                 var response;
 94 | 
 95 |                 // Ignore passing assertions
 96 |                 if (details.result) {
 97 |                     return;
 98 |                 }
 99 | 
100 |                 response = details.message || '';
101 | 
102 |                 if (typeof details.expected !== 'undefined') {
103 |                     if (response) {
104 |                         response += ', ';
105 |                     }
106 | 
107 |                     response += 'expected: ' + details.expected + ', but was: ' + details.actual;
108 |                 }
109 | 
110 |                 if (details.source) {
111 |                     response += '\n' + details.source;
112 |                 }
113 | 
114 |                 currentTestAssertions.push('Failed assertion: ' + response);
115 |             });
116 | 
117 |             QUnit.testDone(function (result) {
118 |                 var i,
119 |                     len,
120 |                     name = '';
121 | 
122 |                 if (result.module) {
123 |                     name += result.module + ': ';
124 |                 }
125 |                 name += result.name;
126 | 
127 |                 if (result.failed) {
128 |                     console.log('\n' + 'Test failed: ' + name);
129 | 
130 |                     for (i = 0, len = currentTestAssertions.length; i < len; i++) {
131 |                         console.log('    ' + currentTestAssertions[i]);
132 |                     }
133 |                 }
134 | 
135 |                 currentTestAssertions.length = 0;
136 |             });
137 | 
138 |             QUnit.done(function (result) {
139 |                 console.log('\n' + 'Took ' + result.runtime + 'ms to run ' + result.total + ' tests. ' + result.passed + ' passed, ' + result.failed + ' failed.');
140 | 
141 |                 if (typeof window.callPhantom === 'function') {
142 |                     window.callPhantom({
143 |                         'name': 'QUnit.done',
144 |                         'data': result
145 |                     });
146 |                 }
147 |             });
148 |         }, false);
149 |     }
150 | })();


--------------------------------------------------------------------------------
/tests/tests.js:
--------------------------------------------------------------------------------
  1 | /* global $, QUnit, self, F, console */
  2 | 'use strict';
  3 | 
  4 | // Functional tests of the UI elements using FuncUnit
  5 | // FuncUnit manages the behaviour of the QUnit run server so that
  6 | // 1) test steps are run in the intended sequence and 
  7 | // 2) the completion of the asynchronous UI operations are properly waited for
  8 | // `F` invokes FuncUnit tests. F is a "copy" of $, created using jQuery.sub.
  9 | // FuncUnit requires that test html is not within `div #qunit-fixture`.
 10 | 
 11 | QUnit.module( "Functional test", {
 12 |   beforeEach: function() {
 13 | 
 14 |     // It was decided not to have id's on the production markup
 15 |     // So we add jQuery collections and html id's here for clarity in testing only
 16 |     self.seek_slider    = $('.playa > section > div > input');
 17 |     self.play_button_slr=   '.playa > section > button:first-child';
 18 |     self.play_button    = $(self.play_button_slr);
 19 |     self.mute_button    = $('.playa button.btn:nth-child(4)');
 20 |     self.volume_slider  = $('.playa div.btn:nth-child(5) > input:nth-child(1)');  
 21 |     self.time_info_slr  =   '.playa button.btn:nth-child(3)'; 
 22 |     self.time_info      = $(self.time_info_slr); 
 23 | 
 24 |    // Add some id's to the UI controls for testing only
 25 |     self.mute_button.attr(  'id', 'mute_button');
 26 |     self.seek_slider.attr(  'id', 'seek_slider');
 27 |     self.play_button.attr(  'id', 'play_button');
 28 |     self.volume_slider.attr('id', 'volume_slider');
 29 |     // self.time_info.attr(    'id', 'time_info'); // No point: player script often overwrites id attribute
 30 | 
 31 |     self.mute_volume_up     = '<i class="glyphicon glyphicon-volume-up"></i>';
 32 |     self.mute_volume_down   = '<i class="glyphicon glyphicon-volume-down"></i>';
 33 |     self.mute_volume_mute   = '<i class="glyphicon glyphicon-volume-off"></i>';
 34 | 
 35 |     self.play_play  = '<i class="glyphicon glyphicon-play"></i>';
 36 |     self.play_pause = '<i class="glyphicon glyphicon-pause"></i>';
 37 | 
 38 |     F('#seek_slider').exists( function () {
 39 |         $('#seek_slider').val('0').trigger('change'); // start from the beginning at each  test
 40 |         }
 41 |     );
 42 | 
 43 |     F('#seek_slider').val('0', 'the seek slider is initially at zero');
 44 |     F('#play_button').html(self.play_play, 'the play button icon shows "play"');
 45 | 
 46 |   } // beforeEach
 47 | }); // module
 48 | 
 49 | QUnit.test( 'audio controls have been replaced by player skin', function ( assert ) {
 50 |     
 51 |     F('audio').exists('there is a remaining audio element' );
 52 | 
 53 |     F('audio[controls]').missing('remaining audio element has no native controls');
 54 | 
 55 |     F('.playa').exists(
 56 |         function () {
 57 |             assert.ok(true, 'DOM checks complete');
 58 |         }, 'the player skin has been created' );
 59 | 
 60 | });
 61 | 
 62 | QUnit.test( 'play sequence:', function( assert ) {
 63 | 
 64 |     var preferred_volume = '0.1'; // during testing
 65 |     var seek_max; // remember "end of play"
 66 | 
 67 |     // Before play ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 68 | 
 69 |     F(self.time_info_slr).exists(
 70 |         function () {
 71 |             var tooltip =  F(self.time_info_slr).data('originalTitle');
 72 |             var text =  F(self.time_info_slr).text();
 73 |             seek_max = Number($('#seek_slider').prop('max'));
 74 |             assert.ok( tooltip.indexOf('Position:') > -1 , 'time button ToolTip initially shows "Position"');
 75 |             assert.ok( text !== '00:00', 'time button ToolTip initially shows "Position: 00:00"');
 76 |         });
 77 | 
 78 |     F('#mute_button').click().html(self.mute_volume_mute, 'clicking mute sets the mute icon to mute');
 79 | 
 80 |     // quiet: we're testing
 81 |     // FuncUnit drag doesn't work on this `input type="range"` slider
 82 |     F('#volume_slider').exists( function () {
 83 |         self.volume_slider.val(preferred_volume).trigger('change');
 84 |         });
 85 | 
 86 |     F('#volume_slider').val(preferred_volume, 'wait for volume slider to go low');
 87 | 
 88 |     F('#mute_button').html(self.mute_volume_down, 'lowering the volume slider changes the mute icon to "volume is low"');
 89 | 
 90 |     // During play ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 91 | 
 92 |     F('#play_button').click().wait(2000).wait(
 93 |         function () {
 94 |             var text =  $(self.time_info_slr).text();
 95 |             return text !== '00:00';
 96 |         }, 'time button ToolTip no longer shows "Position: 00:00"'
 97 |     );
 98 | 
 99 |     // In a browser you can see the "play" icons changing correctly.But I haven't found a way 
100 |     // to emulate this with FuncUnit / QUnit
101 |     // The player changes its play icons in response to audio events 
102 |     // You'd imagine we'd be able to emulate the physical interaction ... bt no joy
103 | 
104 |     F('#mute_button').click().html(self.mute_volume_mute, 'initially clicking mute changes the mute icon to "muted"');
105 | 
106 |     F('#mute_button').click().html(self.mute_volume_down, 'toggling off mute changes the mute icon to "volume is low"');
107 | 
108 |     F('#volume_slider').val(preferred_volume, '... and restores previous volume');
109 |     
110 |     F('#seek_slider').exists( // play for a few seconds before skipping to end 
111 |         function () {
112 |             $('#seek_slider').val(seek_max - 5).trigger('change'); 
113 |             assert.ok(true, 'skipping to the end of the track');
114 |         });
115 | 
116 |     F('#seek_slider').val('0', 'seek slider finally at zero'); // wait for the seek slider to take effect
117 | 
118 | });
119 | 
120 | 
121 | 


--------------------------------------------------------------------------------
/js/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Based upon JSHint Default Configuration File (as on JSHint website)
 3 |     // See http://jshint.com/docs/ for more details
 4 | 
 5 |     "maxerr"        : 50,       // {int} Maximum error before stopping
 6 | 
 7 |     // Enforcing
 8 |     "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
 9 |     "camelcase"     : false,    // true: Identifiers must be in camelCase
10 |     "curly"         : true,     // true: Require {} for every new block or scope
11 |     "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
12 |     "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
13 |     "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
14 |     "immed"         : true,    // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
15 |     "indent"        : 4,        // {int} Number of spaces to use for indentation
16 |     "latedef"       : true,    // true: Require variables/functions to be defined before being used
17 |     "newcap"        : true,    // true: Require capitalization of all constructor functions e.g. `new F()`
18 |     "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
19 |     "noempty"       : true,     // true: Prohibit use of empty blocks
20 |     "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
21 |     "nonew"         : true,    // true: Prohibit use of constructors for side-effects (without assignment)
22 |     "plusplus"      : false,    // true: Prohibit use of `++` & `--`
23 |     "quotmark"      : true,    // Quotation mark consistency:
24 |                                 //   false    : do nothing (default)
25 |                                 //   true     : ensure whatever is used is consistent
26 |                                 //   "single" : require single quotes
27 |                                 //   "double" : require double quotes
28 |     "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
29 |     "unused"        : true,     // true: Require all defined variables be used
30 |     "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
31 |     "maxparams"     : false,    // {int} Max number of formal params allowed per function
32 |     "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
33 |     "maxstatements" : false,    // {int} Max number statements per function
34 |     "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
35 |     "maxlen"        : 120,    // {int} Max number of characters per line
36 | 
37 |     // Relaxing
38 |     "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
39 |     "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
40 |     "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
41 |     "eqnull"        : false,     // true: Tolerate use of `== null`
42 |     "es5"           : false,     // true: Allow ES5 syntax (ex: getters and setters)
43 |     "esnext"        : false,     // true: Allow ES.next (ES6) syntax (ex: `const`)
44 |     "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
45 |                                  // (ex: `for each`, multiple try/catch, function expression…)
46 |     "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
47 |     "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
48 |     "funcscope"     : false,     // true: Tolerate defining variables inside control statements
49 |     "globalstrict"  : false,     // true: Allow global "use strict" (also enables 'strict')
50 |     "iterator"      : false,     // true: Tolerate using the `__iterator__` property
51 |     "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
52 |     "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
53 |     "laxcomma"      : false,     // true: Tolerate comma-first style coding
54 |     "loopfunc"      : false,     // true: Tolerate functions being defined in loops
55 |     "multistr"      : false,     // true: Tolerate multi-line strings
56 |     "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
57 |     "notypeof"      : false,     // true: Tolerate invalid typeof operator values
58 |     "proto"         : false,     // true: Tolerate using the `__proto__` property
59 |     "scripturl"     : false,     // true: Tolerate script-targeted URLs
60 |     "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
61 |     "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
62 |     "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
63 |     "validthis"     : false,     // true: Tolerate using this in a non-constructor function
64 | 
65 |     // Environments
66 |     "browser"       : true,     // Web Browser (window, document, etc)
67 |     "browserify"    : false,    // Browserify (node.js code in the browser)
68 |     "couch"         : false,    // CouchDB
69 |     "devel"         : true,     // Development/debugging (alert, confirm, etc)
70 |     "dojo"          : false,    // Dojo Toolkit
71 |     "jasmine"       : false,    // Jasmine
72 |     "jquery"        : false,    // jQuery
73 |     "mocha"         : true,     // Mocha
74 |     "mootools"      : false,    // MooTools
75 |     "node"          : false,    // Node.js
76 |     "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
77 |     "prototypejs"   : false,    // Prototype and Scriptaculous
78 |     "qunit"         : false,    // QUnit
79 |     "rhino"         : false,    // Rhino
80 |     "shelljs"       : false,    // ShellJS
81 |     "worker"        : false,    // Web Workers
82 |     "wsh"           : false,    // Windows Scripting Host
83 |     "yui"           : false,    // Yahoo User Interface
84 | 
85 |     // Custom Globals
86 |     "globals"       : {}        // additional predefined global variables
87 | }
88 | 


--------------------------------------------------------------------------------
/tests/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Based upon JSHint Default Configuration File (as on JSHint website)
 3 |     // See http://jshint.com/docs/ for more details
 4 | 
 5 |     "maxerr"        : 50,       // {int} Maximum error before stopping
 6 | 
 7 |     // Enforcing
 8 |     "bitwise"       : true,     // true: Prohibit bitwise operators (&, |, ^, etc.)
 9 |     "camelcase"     : false,    // true: Identifiers must be in camelCase
10 |     "curly"         : true,     // true: Require {} for every new block or scope
11 |     "eqeqeq"        : true,     // true: Require triple equals (===) for comparison
12 |     "forin"         : true,     // true: Require filtering for..in loops with obj.hasOwnProperty()
13 |     "freeze"        : true,     // true: prohibits overwriting prototypes of native objects such as Array, Date etc.
14 |     "immed"         : true,     // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());`
15 |     "indent"        : 4,        // {int} Number of spaces to use for indentation
16 |     "latedef"       : true,     // true: Require variables/functions to be defined before being used
17 |     "newcap"        : true,     // true: Require capitalization of all constructor functions e.g. `new F()`
18 |     "noarg"         : true,     // true: Prohibit use of `arguments.caller` and `arguments.callee`
19 |     "noempty"       : true,     // true: Prohibit use of empty blocks
20 |     "nonbsp"        : true,     // true: Prohibit "non-breaking whitespace" characters.
21 |     "nonew"         : false,    // true: Prohibit use of constructors for side-effects (without assignment)
22 |     "plusplus"      : true,     // true: Prohibit use of `++` & `--`
23 |     "quotmark"      : false,    // Quotation mark consistency:
24 |                                 //   false    : do nothing (default)
25 |                                 //   true     : ensure whatever is used is consistent
26 |                                 //   "single" : require single quotes
27 |                                 //   "double" : require double quotes
28 |     "undef"         : true,     // true: Require all non-global variables to be declared (prevents global leaks)
29 |     "unused"        : true,     // true: Require all defined variables be used
30 |     "strict"        : true,     // true: Requires all functions run in ES5 Strict Mode
31 |     "maxparams"     : false,    // {int} Max number of formal params allowed per function
32 |     "maxdepth"      : false,    // {int} Max depth of nested blocks (within functions)
33 |     "maxstatements" : false,    // {int} Max number statements per function
34 |     "maxcomplexity" : false,    // {int} Max cyclomatic complexity per function
35 |     "maxlen"        : 120,      // {int} Max number of characters per line
36 | 
37 |     // Relaxing
38 |     "asi"           : false,     // true: Tolerate Automatic Semicolon Insertion (no semicolons)
39 |     "boss"          : false,     // true: Tolerate assignments where comparisons would be expected
40 |     "debug"         : false,     // true: Allow debugger statements e.g. browser breakpoints.
41 |     "eqnull"        : false,     // true: Tolerate use of `== null`
42 |     "es5"           : false,     // true: Allow ES5 syntax (ex: getters and setters)
43 |     "esnext"        : false,     // true: Allow ES.next (ES6) syntax (ex: `const`)
44 |     "moz"           : false,     // true: Allow Mozilla specific syntax (extends and overrides esnext features)
45 |                                  // (ex: `for each`, multiple try/catch, function expression…)
46 |     "evil"          : false,     // true: Tolerate use of `eval` and `new Function()`
47 |     "expr"          : false,     // true: Tolerate `ExpressionStatement` as Programs
48 |     "funcscope"     : false,     // true: Tolerate defining variables inside control statements
49 |     "globalstrict"  : true,     // true: Allow global "use strict" (also enables 'strict')
50 |     "iterator"      : false,     // true: Tolerate using the `__iterator__` property
51 |     "lastsemic"     : false,     // true: Tolerate omitting a semicolon for the last statement of a 1-line block
52 |     "laxbreak"      : false,     // true: Tolerate possibly unsafe line breakings
53 |     "laxcomma"      : false,     // true: Tolerate comma-first style coding
54 |     "loopfunc"      : false,     // true: Tolerate functions being defined in loops
55 |     "multistr"      : false,     // true: Tolerate multi-line strings
56 |     "noyield"       : false,     // true: Tolerate generator functions with no yield statement in them.
57 |     "notypeof"      : false,     // true: Tolerate invalid typeof operator values
58 |     "proto"         : false,     // true: Tolerate using the `__proto__` property
59 |     "scripturl"     : false,     // true: Tolerate script-targeted URLs
60 |     "shadow"        : false,     // true: Allows re-define variables later in code e.g. `var x=1; x=2;`
61 |     "sub"           : false,     // true: Tolerate using `[]` notation when it can still be expressed in dot notation
62 |     "supernew"      : false,     // true: Tolerate `new function () { ... };` and `new Object;`
63 |     "validthis"     : true,     // true: Tolerate using this in a non-constructor function
64 | 
65 |     // Environments
66 |     "browser"       : true,     // Web Browser (window, document, etc)
67 |     "browserify"    : false,    // Browserify (node.js code in the browser)
68 |     "couch"         : false,    // CouchDB
69 |     "devel"         : true,     // Development/debugging (alert, confirm, etc)
70 |     "dojo"          : false,    // Dojo Toolkit
71 |     "jasmine"       : false,    // Jasmine
72 |     "jquery"        : false,    // jQuery
73 |     "mocha"         : true,     // Mocha
74 |     "mootools"      : false,    // MooTools
75 |     "node"          : false,    // Node.js
76 |     "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
77 |     "prototypejs"   : false,    // Prototype and Scriptaculous
78 |     "qunit"         : false,    // QUnit
79 |     "rhino"         : false,    // Rhino
80 |     "shelljs"       : false,    // ShellJS
81 |     "worker"        : false,    // Web Workers
82 |     "wsh"           : false,    // Windows Scripting Host
83 |     "yui"           : false,    // Yahoo User Interface
84 | 
85 |     // Custom Globals
86 |     "globals"       : {}        // additional predefined global variables
87 | }
88 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
  1 |                                  Apache License
  2 |                            Version 2.0, January 2004
  3 |                         http://www.apache.org/licenses/
  4 | 
  5 |    TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
  6 | 
  7 |    1. Definitions.
  8 | 
  9 |       "License" shall mean the terms and conditions for use, reproduction,
 10 |       and distribution as defined by Sections 1 through 9 of this document.
 11 | 
 12 |       "Licensor" shall mean the copyright owner or entity authorized by
 13 |       the copyright owner that is granting the License.
 14 | 
 15 |       "Legal Entity" shall mean the union of the acting entity and all
 16 |       other entities that control, are controlled by, or are under common
 17 |       control with that entity. For the purposes of this definition,
 18 |       "control" means (i) the power, direct or indirect, to cause the
 19 |       direction or management of such entity, whether by contract or
 20 |       otherwise, or (ii) ownership of fifty percent (50%) or more of the
 21 |       outstanding shares, or (iii) beneficial ownership of such entity.
 22 | 
 23 |       "You" (or "Your") shall mean an individual or Legal Entity
 24 |       exercising permissions granted by this License.
 25 | 
 26 |       "Source" form shall mean the preferred form for making modifications,
 27 |       including but not limited to software source code, documentation
 28 |       source, and configuration files.
 29 | 
 30 |       "Object" form shall mean any form resulting from mechanical
 31 |       transformation or translation of a Source form, including but
 32 |       not limited to compiled object code, generated documentation,
 33 |       and conversions to other media types.
 34 | 
 35 |       "Work" shall mean the work of authorship, whether in Source or
 36 |       Object form, made available under the License, as indicated by a
 37 |       copyright notice that is included in or attached to the work
 38 |       (an example is provided in the Appendix below).
 39 | 
 40 |       "Derivative Works" shall mean any work, whether in Source or Object
 41 |       form, that is based on (or derived from) the Work and for which the
 42 |       editorial revisions, annotations, elaborations, or other modifications
 43 |       represent, as a whole, an original work of authorship. For the purposes
 44 |       of this License, Derivative Works shall not include works that remain
 45 |       separable from, or merely link (or bind by name) to the interfaces of,
 46 |       the Work and Derivative Works thereof.
 47 | 
 48 |       "Contribution" shall mean any work of authorship, including
 49 |       the original version of the Work and any modifications or additions
 50 |       to that Work or Derivative Works thereof, that is intentionally
 51 |       submitted to Licensor for inclusion in the Work by the copyright owner
 52 |       or by an individual or Legal Entity authorized to submit on behalf of
 53 |       the copyright owner. For the purposes of this definition, "submitted"
 54 |       means any form of electronic, verbal, or written communication sent
 55 |       to the Licensor or its representatives, including but not limited to
 56 |       communication on electronic mailing lists, source code control systems,
 57 |       and issue tracking systems that are managed by, or on behalf of, the
 58 |       Licensor for the purpose of discussing and improving the Work, but
 59 |       excluding communication that is conspicuously marked or otherwise
 60 |       designated in writing by the copyright owner as "Not a Contribution."
 61 | 
 62 |       "Contributor" shall mean Licensor and any individual or Legal Entity
 63 |       on behalf of whom a Contribution has been received by Licensor and
 64 |       subsequently incorporated within the Work.
 65 | 
 66 |    2. Grant of Copyright License. Subject to the terms and conditions of
 67 |       this License, each Contributor hereby grants to You a perpetual,
 68 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 69 |       copyright license to reproduce, prepare Derivative Works of,
 70 |       publicly display, publicly perform, sublicense, and distribute the
 71 |       Work and such Derivative Works in Source or Object form.
 72 | 
 73 |    3. Grant of Patent License. Subject to the terms and conditions of
 74 |       this License, each Contributor hereby grants to You a perpetual,
 75 |       worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 76 |       (except as stated in this section) patent license to make, have made,
 77 |       use, offer to sell, sell, import, and otherwise transfer the Work,
 78 |       where such license applies only to those patent claims licensable
 79 |       by such Contributor that are necessarily infringed by their
 80 |       Contribution(s) alone or by combination of their Contribution(s)
 81 |       with the Work to which such Contribution(s) was submitted. If You
 82 |       institute patent litigation against any entity (including a
 83 |       cross-claim or counterclaim in a lawsuit) alleging that the Work
 84 |       or a Contribution incorporated within the Work constitutes direct
 85 |       or contributory patent infringement, then any patent licenses
 86 |       granted to You under this License for that Work shall terminate
 87 |       as of the date such litigation is filed.
 88 | 
 89 |    4. Redistribution. You may reproduce and distribute copies of the
 90 |       Work or Derivative Works thereof in any medium, with or without
 91 |       modifications, and in Source or Object form, provided that You
 92 |       meet the following conditions:
 93 | 
 94 |       (a) You must give any other recipients of the Work or
 95 |           Derivative Works a copy of this License; and
 96 | 
 97 |       (b) You must cause any modified files to carry prominent notices
 98 |           stating that You changed the files; and
 99 | 
100 |       (c) You must retain, in the Source form of any Derivative Works
101 |           that You distribute, all copyright, patent, trademark, and
102 |           attribution notices from the Source form of the Work,
103 |           excluding those notices that do not pertain to any part of
104 |           the Derivative Works; and
105 | 
106 |       (d) If the Work includes a "NOTICE" text file as part of its
107 |           distribution, then any Derivative Works that You distribute must
108 |           include a readable copy of the attribution notices contained
109 |           within such NOTICE file, excluding those notices that do not
110 |           pertain to any part of the Derivative Works, in at least one
111 |           of the following places: within a NOTICE text file distributed
112 |           as part of the Derivative Works; within the Source form or
113 |           documentation, if provided along with the Derivative Works; or,
114 |           within a display generated by the Derivative Works, if and
115 |           wherever such third-party notices normally appear. The contents
116 |           of the NOTICE file are for informational purposes only and
117 |           do not modify the License. You may add Your own attribution
118 |           notices within Derivative Works that You distribute, alongside
119 |           or as an addendum to the NOTICE text from the Work, provided
120 |           that such additional attribution notices cannot be construed
121 |           as modifying the License.
122 | 
123 |       You may add Your own copyright statement to Your modifications and
124 |       may provide additional or different license terms and conditions
125 |       for use, reproduction, or distribution of Your modifications, or
126 |       for any such Derivative Works as a whole, provided Your use,
127 |       reproduction, and distribution of the Work otherwise complies with
128 |       the conditions stated in this License.
129 | 
130 |    5. Submission of Contributions. Unless You explicitly state otherwise,
131 |       any Contribution intentionally submitted for inclusion in the Work
132 |       by You to the Licensor shall be under the terms and conditions of
133 |       this License, without any additional terms or conditions.
134 |       Notwithstanding the above, nothing herein shall supersede or modify
135 |       the terms of any separate license agreement you may have executed
136 |       with Licensor regarding such Contributions.
137 | 
138 |    6. Trademarks. This License does not grant permission to use the trade
139 |       names, trademarks, service marks, or product names of the Licensor,
140 |       except as required for reasonable and customary use in describing the
141 |       origin of the Work and reproducing the content of the NOTICE file.
142 | 
143 |    7. Disclaimer of Warranty. Unless required by applicable law or
144 |       agreed to in writing, Licensor provides the Work (and each
145 |       Contributor provides its Contributions) on an "AS IS" BASIS,
146 |       WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 |       implied, including, without limitation, any warranties or conditions
148 |       of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 |       PARTICULAR PURPOSE. You are solely responsible for determining the
150 |       appropriateness of using or redistributing the Work and assume any
151 |       risks associated with Your exercise of permissions under this License.
152 | 
153 |    8. Limitation of Liability. In no event and under no legal theory,
154 |       whether in tort (including negligence), contract, or otherwise,
155 |       unless required by applicable law (such as deliberate and grossly
156 |       negligent acts) or agreed to in writing, shall any Contributor be
157 |       liable to You for damages, including any direct, indirect, special,
158 |       incidental, or consequential damages of any character arising as a
159 |       result of this License or out of the use or inability to use the
160 |       Work (including but not limited to damages for loss of goodwill,
161 |       work stoppage, computer failure or malfunction, or any and all
162 |       other commercial damages or losses), even if such Contributor
163 |       has been advised of the possibility of such damages.
164 | 
165 |    9. Accepting Warranty or Additional Liability. While redistributing
166 |       the Work or Derivative Works thereof, You may choose to offer,
167 |       and charge a fee for, acceptance of support, warranty, indemnity,
168 |       or other liability obligations and/or rights consistent with this
169 |       License. However, in accepting such obligations, You may act only
170 |       on Your own behalf and on Your sole responsibility, not on behalf
171 |       of any other Contributor, and only if You agree to indemnify,
172 |       defend, and hold each Contributor harmless for any liability
173 |       incurred by, or claims asserted against, such Contributor by reason
174 |       of your accepting any such warranty or additional liability.
175 | 
176 |    END OF TERMS AND CONDITIONS
177 | 


--------------------------------------------------------------------------------
/js/bootstrap3_player.js:
--------------------------------------------------------------------------------
  1 | /* global jQuery */
  2 | (function ($) {'use strict';
  3 |     $('audio[controls]').before(function () {
  4 | 
  5 |         var song = this;
  6 |         song.controls = false;
  7 | 
  8 |         var player_box = document.createElement('div');
  9 |         $(player_box).addClass($(song).attr('class') + ' well container-fluid playa');
 10 | 
 11 |         var data_sec = document.createElement('section');
 12 |         $(data_sec).addClass('collapsing center-block row col-sm-12');
 13 | 
 14 |         var toggle_holder = document.createElement('div');
 15 |         $(toggle_holder).addClass('btn-group center-block row col-sm-12');
 16 | 
 17 |         var data_toggle = document.createElement('button');
 18 |         $(data_toggle).attr('type','button');
 19 |         $(data_toggle).html('<i class="glyphicon glyphicon-align-justify" style="top:-3px"></i>');
 20 |         $(data_toggle).addClass('btn btn-default btn-lg btn-block row col-sm-12');
 21 |         $(data_toggle).attr('style', 'opacity:0.3');
 22 |         $(data_toggle).click(function () {$(data_sec).collapse('toggle'); });
 23 |         $(data_toggle).attr('title', 'Details');
 24 |         $(data_toggle).tooltip({'container': 'body', 'placement': 'top', 'html': true});
 25 |         $(toggle_holder).append(data_toggle);
 26 | 
 27 |         var data_table = document.createElement('table');
 28 |         $(data_table).addClass('table table-condensed');
 29 | 
 30 |         var player = document.createElement('section');
 31 |         $(player).addClass('btn-group  center-block row  col-sm-12');
 32 | 
 33 |         var load_error = function () {
 34 |             // console.log('error');
 35 |             $(player_box).find('.btn').addClass('disabled');
 36 |             $(player_box).find('input[type="range"]').hide();
 37 |             $(player_box).find('.glyphicon-refresh').text('Error');
 38 |             $(player_box).find('.glyphicon-refresh').parent().attr('title', 'There was an error loading the audio.');
 39 |             $(player_box).find('.glyphicon-refresh').parent().tooltip('fixTitle');
 40 |             $(player_box).find('.glyphicon-refresh').removeClass('glyphicon glyphicon-refresh spin');
 41 |         }; // load_error
 42 | 
 43 |         var addPlay = function () {
 44 |             var play = document.createElement('button');
 45 |             $(play).attr('type','button');
 46 |             $(play).addClass('btn  btn-default disabled col-sm-1');
 47 | 
 48 |             play.setPlayState = function (toggle) {
 49 |                 $(play).removeClass('disabled');
 50 |                 if (toggle === 'play') {
 51 |                     $(play).html('<i class="glyphicon glyphicon-play"></i>');
 52 |                     $(play).click(function () {
 53 |                         song.play();
 54 |                     });
 55 |                 }
 56 |                 if (!song.paused || toggle === 'pause') {
 57 |                     $(play).html('<i class="glyphicon glyphicon-pause"></i>');
 58 |                     $(play).click(function () {
 59 |                         song.pause();
 60 |                     });
 61 |                 }
 62 |             }; // setPlayState
 63 | 
 64 |             // media events from the audio element will trigger rebuilding the play button
 65 |             $(song).on('play', function () {play.setPlayState('pause'); });
 66 |             $(song).on('canplay', function () {play.setPlayState('play'); });
 67 |             $(song).on('pause', function () {play.setPlayState('play'); });
 68 | 
 69 |             var timeout = 0;
 70 | 
 71 |             var loadCheck = setInterval(function () {
 72 |                 if (!song.paused){
 73 |                     play.setPlayState('pause');
 74 |                     clearInterval(loadCheck);
 75 |                     return true;
 76 |                 }
 77 |                 if (isNaN(song.duration) === false) {
 78 |                     play.setPlayState('play');
 79 |                     clearInterval(loadCheck);
 80 |                     return true;
 81 |                 }
 82 |                 if (song.networkState === 3 || timeout === 100) {
 83 |                     // 3 = NETWORK_NO_SOURCE - no audio/video source found
 84 |                     console.log('No audio source was found or a timeout occurred');
 85 |                     load_error();
 86 |                     clearInterval(loadCheck);
 87 |                     return false;
 88 |                 }
 89 |                 timeout++;
 90 |             }, 100); // x milliseconds per attempt
 91 |             $(player).append(play);
 92 |         }; // addPlay
 93 | 
 94 |         var addSeek = function () {
 95 |             var seek = document.createElement('input');
 96 |             $(seek).attr({
 97 |                 'type': 'range',
 98 |                 'min': 0,
 99 |                 'value': 0,
100 |                 'class': 'seek'
101 |             });
102 | 
103 |             seek.progress = function () {
104 |                 var i, bufferedstart, bufferedend;
105 |                 var bg = 'rgba(223, 240, 216, 1) 0%';
106 |                 bg += ', rgba(223, 240, 216, 1) ' + ((song.currentTime / song.duration) * 100) + '%';
107 |                 bg += ', rgba(223, 240, 216, 0) ' + ((song.currentTime / song.duration) * 100) + '%';
108 |                 for (i = 0; i < song.buffered.length; i++) {
109 |                     if (song.buffered.end(i) > song.currentTime && 
110 |                         isNaN(song.buffered.end(i)) === false && 
111 |                         isNaN(song.buffered.start(i)) === false) {
112 |                         
113 |                         if (song.buffered.end(i) < song.duration) {
114 |                             bufferedend = ((song.buffered.end(i) / song.duration) * 100);
115 |                         } else {
116 |                             bufferedend = 100;
117 |                         }
118 |                         if (song.buffered.start(i) > song.currentTime) {
119 |                             bufferedstart = ((song.buffered.start(i) / song.duration) * 100);
120 |                         } else {
121 |                             bufferedstart = ((song.currentTime / song.duration) * 100);
122 |                         }
123 |                         bg += ', rgba(217, 237, 247, 0) ' + bufferedstart + '%';
124 |                         bg += ', rgba(217, 237, 247, 1) ' + bufferedstart + '%';
125 |                         bg += ', rgba(217, 237, 247, 1) ' + bufferedend + '%';
126 |                         bg += ', rgba(217, 237, 247, 0) ' + bufferedend + '%';
127 |                     }
128 |                 }
129 |                 $(seek).css('background', '-webkit-linear-gradient(left, ' + bg + ')');
130 |                     //These may be re-enabled when/if other browsers support the background like webkit
131 |                     //$(seek).css('background','-o-linear-gradient(left,  ' + bg + ')');
132 |                     //$(seek).css('background','-moz-linear-gradient(left,  ' + bg + ')');
133 |                     //$(seek).css('background','-ms-linear-gradient(left,  ' + bg + ')');
134 |                     //$(seek).css('background','linear-gradient(to right,  ' + bg + ')');
135 |                 $(seek).css('background-color', '#ddd');
136 |             }; // seek.progress
137 | 
138 |             seek.set = function () {
139 |                 $(seek).val(song.currentTime);
140 |                 seek.progress();
141 |             };
142 | 
143 |             seek.slide = function () {
144 |                 song.currentTime = $(seek).val();
145 |                 seek.progress();
146 |             };
147 | 
148 |             seek.init = function () {
149 |                 $(seek).attr({
150 |                     'max': song.duration,
151 |                     'step': song.duration / 100
152 |                 });
153 |                 seek.set();
154 |             };
155 | 
156 |             seek.reset = function () {
157 |                 $(seek).val(0);
158 |                 song.currentTime = $(seek).val();
159 |                 if (!song.loop) {
160 |                     song.pause();
161 |                 } else {
162 |                     song.play();
163 |                 }
164 |             };
165 | 
166 |             var seek_wrapper = document.createElement('div');
167 |             $(seek_wrapper).addClass('btn btn-default col-sm-4 hidden-xs');
168 |             $(seek_wrapper).append(seek);
169 | 
170 |             // bind seek / position slider events
171 |             $(seek).on('change', seek.slide);
172 | 
173 |             // bind audio element events to trigger seek slider updates
174 |             $(song).on('timeupdate', seek.init);
175 |             $(song).on('loadedmetadata', seek.init);
176 |             $(song).on('loadeddata', seek.init);
177 |             $(song).on('progress', seek.init);
178 |             $(song).on('canplay', seek.init);
179 |             $(song).on('canplaythrough', seek.init);
180 |             $(song).on('ended', seek.reset);
181 |             if (song.readyState > 0) {
182 |                 seek.init();
183 |             }
184 | 
185 |             $(player).append(seek_wrapper);
186 |         }; // addSeek
187 | 
188 |         var addTime = function () {
189 |             var time = document.createElement('button');
190 |             $(time).attr('type','button');
191 |             $(time).addClass('btn btn-default col-sm-3');
192 |             $(time).tooltip({'container': 'body', 'placement': 'right', 'html': true});
193 | 
194 |             time.twodigit = function (myNum) {
195 |                 return ('0' + myNum).slice(-2);
196 |             }; // time.twodigit
197 | 
198 |             time.timesplit = function (a) {
199 |                 if (isNaN(a)) {
200 |                     return '<i class="glyphicon glyphicon-refresh spin"></i>';
201 |                 }
202 |                 var hours = Math.floor(a / 3600);
203 |                 var minutes = Math.floor(a / 60) - (hours * 60);
204 |                 var seconds = Math.floor(a) - (hours * 3600) - (minutes * 60);
205 |                 var timeStr = time.twodigit(minutes) + ':' + time.twodigit(seconds);
206 |                 if (hours > 0) {
207 |                     timeStr = hours + ':' + timeStr;
208 |                 }
209 |                 return timeStr;
210 |             }; // time.timesplit
211 | 
212 |             time.showtime = function () {
213 |                 var position_title = 'Click to Reset<hr style="padding:0; margin:0;" />Position: ';
214 |                 var length_title = 'Click to Reset<hr style="padding:0; margin:0;" />Length: ';
215 |                 if (!song.paused) {
216 |                     $(time).html(time.timesplit(song.currentTime));
217 |                     $(time).attr({'title': length_title + (time.timesplit(song.duration))});
218 |                 } else {
219 |                     $(time).html(time.timesplit(song.duration));
220 |                     $(time).attr({'title': position_title  + (time.timesplit(song.currentTime))});
221 |                 }
222 |                 $(time).tooltip('fixTitle');
223 |             }; // time.showtime
224 | 
225 |             $(time).click(function () {
226 |                 song.pause();
227 |                 song.currentTime = 0;
228 |                 time.showtime();
229 |                 $(time).tooltip('fixTitle');
230 |                 $(time).tooltip('show');
231 |             }); // time.click
232 | 
233 |             $(time).tooltip('show');
234 |             $(song).on('loadedmetadata', time.showtime);
235 |             $(song).on('loadeddata', time.showtime);
236 |             $(song).on('progress', time.showtime);
237 |             $(song).on('canplay', time.showtime);
238 |             $(song).on('canplaythrough', time.showtime);
239 |             $(song).on('timeupdate', time.showtime);
240 |             if (song.readyState > 0) {
241 |                 time.showtime();
242 |             } else {
243 |                 $(time).html('<i class="glyphicon glyphicon-refresh spin"></i>');
244 |             }
245 |             $(player).append(time);
246 |         }; // addTime
247 | 
248 |         var addMute = function () {
249 |             var mute = document.createElement('button');
250 |             $(mute).attr('type','button');
251 |             $(mute).addClass('btn btn-default  col-sm-1');
252 | 
253 |             mute.checkVolume = function () {
254 |                 if (song.volume > 0.5 && !song.muted) {
255 |                     $(mute).html('<i class="glyphicon glyphicon-volume-up"></i>');
256 |                 } else if (song.volume < 0.5 && song.volume > 0 && !song.muted) {
257 |                     $(mute).html('<i class="glyphicon glyphicon-volume-down"></i>');
258 |                 } else {
259 |                     $(mute).html('<i class="glyphicon glyphicon-volume-off"></i>');
260 |                 }
261 |             }; // mute.checkVolume
262 | 
263 |             $(mute).click( function () {
264 |                 if (song.muted) {
265 |                     song.muted = false;
266 |                     song.volume = song.oldvolume;
267 |                 } else {
268 |                     song.muted = true;
269 |                     song.oldvolume = song.volume;
270 |                     song.volume = 0;
271 |                 }
272 |                 mute.checkVolume();
273 |             }); // mute.click(
274 | 
275 |             mute.checkVolume();
276 |             $(song).on('volumechange', mute.checkVolume);
277 |             $(player).append(mute);
278 |         }; // addMute
279 | 
280 |         var addVolume = function () {
281 |             var volume = document.createElement('input');
282 |             $(volume).attr({
283 |                 'type': 'range',
284 |                 'min': 0,
285 |                 'max': 1,
286 |                 'step': 1 / 100,
287 |                 'value': 1
288 |             });
289 | 
290 |             volume.slide = function () {
291 |                 song.muted = false;
292 |                 song.volume = $(volume).val();
293 |             }; // volume.slide
294 | 
295 |             volume.set = function () {
296 |                 $(volume).val(song.volume);
297 |             };
298 | 
299 |             var vol_wrapper = document.createElement('div');
300 |             $(vol_wrapper).addClass('btn  btn-default  row col-sm-3  hidden-xs');
301 |             $(vol_wrapper).append(volume);
302 |             $(volume).on('change', volume.slide);
303 |             $(song).on('volumechange', volume.set);
304 |             $(player).append(vol_wrapper);
305 | 
306 |         }; // addVolume
307 | 
308 |         var addAlbumArt = function () {
309 |             var albumArt = document.createElement('img');
310 |             $(albumArt).addClass('thumbnail');
311 |             $(albumArt).attr('src', $(song).data('infoAlbumArt'));
312 |             $(data_sec).append(albumArt);
313 |         }; // addAlbumArt
314 | 
315 |         var addInfo = function (title, dataId) {
316 |             var row = document.createElement('tr');
317 |             var head = document.createElement('th');
318 |             var data = document.createElement('td');
319 |             $(head).html(title);
320 |             $(data).html($(song).data(dataId));
321 |             $(row).append(head);
322 |             $(row).append(data);
323 |             $(data_table).append(row);
324 |         }; // addInfo
325 | 
326 |         var addData = function () {
327 |             // jslint will complain about our use of `typeof` but 
328 |             // it's the only way not to raise an error by referencing 
329 |             // a nnon-existent data-* variable 
330 |             if (typeof ($(song).data('infoAlbumArt')) !== 'undefined') {
331 |                 addAlbumArt();
332 |             }
333 |             if (typeof ($(song).data('infoArtist')) !== 'undefined') {
334 |                 addInfo('Artist', 'infoArtist');
335 |             }
336 |             if (typeof ($(song).data('infoTitle')) !== 'undefined') {
337 |                 addInfo('Title', 'infoTitle');
338 |             }
339 |             if (typeof ($(song).data('infoAlbumTitle')) !== 'undefined') {
340 |                 addInfo('Album', 'infoAlbumTitle');
341 |             }
342 |             if (typeof ($(song).data('infoLabel')) !== 'undefined') {
343 |                 addInfo('Label', 'infoLabel');
344 |             }
345 |             if (typeof ($(song).data('infoYear')) !== 'undefined') {
346 |                 addInfo('Year', 'infoYear');
347 |             }
348 |             if ($(data_table).html() !== '') {
349 |                 $(data_sec).append(data_table);
350 |                 $(player_box).append(toggle_holder);
351 |                 $(player_box).append(data_sec);
352 |             }
353 |         }; // addData
354 | 
355 |         var addPlayer = function () {
356 |             if ($(song).data('play') !== 'off') {
357 |                 addPlay();
358 |             }
359 |             if ($(song).data('seek') !== 'off') {
360 |                 addSeek();
361 |             }
362 |             if ($(song).data('time') !== 'off') {
363 |                 addTime();
364 |             }
365 |             if ($(song).data('mute') !== 'off') {
366 |                 addMute();
367 |             }
368 |             if ($(song).data('volume') !== 'off') {
369 |                 addVolume();
370 |             }
371 |             $(player_box).append(player);
372 |         }; // addPlayer
373 | 
374 |         var addAttribution = function () {
375 |             var attribution = document.createElement('div');
376 |             $(attribution).addClass('row col-sm-10 col-sm-offset-1');
377 |             if (typeof ($(song).data('infoAttLink')) !== 'undefined') {
378 |                 var attribution_link = document.createElement('a');
379 |                 $(attribution_link).addClass('text-muted btn btn-link btn-sm');
380 |                 $(attribution_link).attr('href', $(song).data('infoAttLink'));
381 |                 $(attribution_link).html($(song).data('infoAtt'));
382 |                 $(attribution).append(attribution_link);
383 |             } else {
384 |                 $(attribution).html($(song).data('infoAtt'));
385 |             }
386 |             $(player_box).append(attribution);
387 |         }; // addAttribution
388 | 
389 |         var fillPlayerBox = function () {
390 |             addData();
391 |             addPlayer();
392 |             if (typeof ($(song).data('infoAtt')) !== 'undefined') {
393 |                 addAttribution();
394 |             }
395 |         }; // fillPlayerBox
396 | 
397 |         fillPlayerBox();
398 |         $(song).on('error', function () {
399 |             console.log("Error encountered after fillPlayerBox");
400 |             load_error();
401 |         });
402 |         return player_box;
403 |     });
404 | })(jQuery);
405 | 


--------------------------------------------------------------------------------