bachir/edlp_d8
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

started player, optimized corpus map by avoiding some node fn if particule is resting

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2018-03-06 23:30:40 +01:00
parent 4c3c7c6577
commit f582589a40
7 changed files with 384 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/custom/edlptheme/assets/dist/scripts/main.min.js
Vendored
+113 -5
View File
@@ -42,6 +42,110 @@ edlp_vars = {
if (_$body.is('.path-productions')) {
initProductions();
}
initAudioPlayer();
};
// _ _ _
// /_\ _ _ __| (_)___
// / _ \ || / _` | / _ \
// /_/ \_\_,_\__,_|_\___/
//
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
// https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
// https://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){
var that = this;
this.fid;
this.audio = new Audio();
// audio events
this.audio_events = ["loadedmetadata","progress","canplay","timeupdate","ended"];
// UI dom objects
this.$container = $('<div id="audio-player">')
.appendTo('header[role="banner"] .region-header');
this.$timeline = $('<div>').addClass('time-line').appendTo(this.$container);
this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
this.$duration = $('<div>').addClass('duration').appendTo(this.$container);
this.$currentTime = $('<div>').addClass('current-time').appendTo(this.$container);
if (typeof AudioPlayer.initialized == "undefined") {
AudioPlayer.prototype.init = function(){
// init audio events
var fn = '';
for (var i = 0; i < this.audio_events.length; i++) {
fn = this.audio_events[i];
// capitalize first letter of event (only cosmetic :p )
fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
this.audio.addEventListener(
this.audio_events[i],
this[fn].bind(this),
true);
}
};
AudioPlayer.prototype.loadSound = function(url){
console.log('AudioPlayer loadSound : url', url);
this.audio.src = url;
// this.play();
};
AudioPlayer.prototype.play = function(){
console.log('AudioPlayer play()');
this.audio.play();
};
AudioPlayer.prototype.onLoadedmetadata = function(){
var rem = parseInt(this.audio.duration, 10),
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
};
AudioPlayer.prototype.onProgress = function(){
// var myBuffered = this.audio.buffered;
// var mySeekable = this.audio.seekable;
if( this.audio.buffered.length ){
// var fromPercent = this.fromPercent;
// var value = percentLoad - fromPercent;
// if( value<0 ) value = 0;
// this.$loadingBar.css({width: value + '%',marginLeft:fromPercent + '%'});
this.$loader.css({
'width':parseInt(((this.audio.buffered.end(0) / this.audio.duration) * 100), 10)+'%'
});
}
};
AudioPlayer.prototype.onCanplay = function(){
this.play();
};
AudioPlayer.prototype.onTimeupdate = function(){
// console.log('Audio update()', this.audio.currentTime);
this.$cursor.css({
'left':(this.audio.currentTime/this.audio.duration * 50)+"px"
});
var rem = parseInt(this.audio.currentTime, 10),
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
};
AudioPlayer.prototype.onEnded = function(){
console.log('AudioPlayer onEnded');
};
AudioPlayer.initialized = true;
this.init();
}
};
// ___ _ _ ___
@@ -60,7 +164,6 @@ edlp_vars = {
// / _ \ | / _` \ \ /
// /_/ \_\/ \__,_/_\_\
// |__/
// TODO: add url hash nav
// TODO: implement history.js
function initAjaxLinks(){
@@ -165,10 +268,15 @@ edlp_vars = {
function onCorpusMapReady(e){
console.log('theme : onCorpusReady');
_$corpus_map = $('canvas#corpus-map');
_$corpus_map.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
backToFrontPage();
});
_$corpus_map
.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
backToFrontPage();
})
.on('corpus-cliked-on-node', function(e) {
console.log('theme : corpus-cliked-on-node', e);
_audio_player.loadSound(e.target_node.audio_url);
});
}
// ___ _ _ _
sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css
Vendored
+33
View File
@@ -1134,6 +1134,7 @@ footer[role="contentinfo"] {
pointer-events: none; }
header[role="banner"] {
position: relative;
padding: 0 0 1em 0;
border-bottom: 1px solid red;
pointer-events: all; }
@@ -1290,6 +1291,38 @@ body.ajax-loading main[role="main"]:before {
background-position: center;
border-radius: 30px; }
#audio-player {
position: absolute;
top: 0;
left: 0;
background-color: white;
height: 100%;
min-width: 300px;
max-width: 500px;
z-index: 20;
outline: 1px dotted green; }
#audio-player .time-line {
position: relative;
width: 50px;
height: 1px;
background-color: #000;
overflow: visible;
-webkit-transform: rotateZ(-45deg);
transform: rotateZ(-45deg); }
#audio-player .time-line .loader {
width: 0;
height: 100%;
background-color: red;
top: 0;
left: 0; }
#audio-player .time-line .cursor {
height: 10px;
width: 0;
border-left: 2px solid red;
position: absolute;
left: 0;
top: -5px; }
body.path-agenda main .col > .wrapper {
height: 100%; }
sites/all/themes/custom/edlptheme/assets/scripts/main.js
+113 -5
View File
@@ -19,6 +19,110 @@
if (_$body.is('.path-productions')) {
initProductions();
}
initAudioPlayer();
};
// _ _ _
// /_\ _ _ __| (_)___
// / _ \ || / _` | / _ \
// /_/ \_\_,_\__,_|_\___/
//
// https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
// https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/gg589528%28v%3dvs.85%29
// https://www.binarytides.com/using-html5-audio-element-javascript/
//
function initAudioPlayer(){
_audio_player = new AudioPlayer();
};
function AudioPlayer(){
var that = this;
this.fid;
this.audio = new Audio();
// audio events
this.audio_events = ["loadedmetadata","progress","canplay","timeupdate","ended"];
// UI dom objects
this.$container = $('<div id="audio-player">')
.appendTo('header[role="banner"] .region-header');
this.$timeline = $('<div>').addClass('time-line').appendTo(this.$container);
this.$loader = $('<div>').addClass('loader').appendTo(this.$timeline);
this.$cursor = $('<div>').addClass('cursor').appendTo(this.$timeline);
this.$duration = $('<div>').addClass('duration').appendTo(this.$container);
this.$currentTime = $('<div>').addClass('current-time').appendTo(this.$container);
if (typeof AudioPlayer.initialized == "undefined") {
AudioPlayer.prototype.init = function(){
// init audio events
var fn = '';
for (var i = 0; i < this.audio_events.length; i++) {
fn = this.audio_events[i];
// capitalize first letter of event (only cosmetic :p )
fn = 'on'+fn.charAt(0).toUpperCase()+fn.slice(1);
this.audio.addEventListener(
this.audio_events[i],
this[fn].bind(this),
true);
}
};
AudioPlayer.prototype.loadSound = function(url){
console.log('AudioPlayer loadSound : url', url);
this.audio.src = url;
// this.play();
};
AudioPlayer.prototype.play = function(){
console.log('AudioPlayer play()');
this.audio.play();
};
AudioPlayer.prototype.onLoadedmetadata = function(){
var rem = parseInt(this.audio.duration, 10),
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
this.$duration.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
};
AudioPlayer.prototype.onProgress = function(){
// var myBuffered = this.audio.buffered;
// var mySeekable = this.audio.seekable;
if( this.audio.buffered.length ){
// var fromPercent = this.fromPercent;
// var value = percentLoad - fromPercent;
// if( value<0 ) value = 0;
// this.$loadingBar.css({width: value + '%',marginLeft:fromPercent + '%'});
this.$loader.css({
'width':parseInt(((this.audio.buffered.end(0) / this.audio.duration) * 100), 10)+'%'
});
}
};
AudioPlayer.prototype.onCanplay = function(){
this.play();
};
AudioPlayer.prototype.onTimeupdate = function(){
// console.log('Audio update()', this.audio.currentTime);
this.$cursor.css({
'left':(this.audio.currentTime/this.audio.duration * 50)+"px"
});
var rem = parseInt(this.audio.currentTime, 10),
mins = Math.floor(rem/60,10),
secs = rem - mins*60;
this.$currentTime.html('<span>'+(mins<10 ? '0':'')+mins+':'+(secs<10 ? '0':'')+secs+'</span>');
};
AudioPlayer.prototype.onEnded = function(){
console.log('AudioPlayer onEnded');
};
AudioPlayer.initialized = true;
this.init();
}
};
// ___ _ _ ___
@@ -37,7 +141,6 @@
// / _ \ | / _` \ \ /
// /_/ \_\/ \__,_/_\_\
// |__/
// TODO: add url hash nav
// TODO: implement history.js
function initAjaxLinks(){
@@ -142,10 +245,15 @@
function onCorpusMapReady(e){
console.log('theme : onCorpusReady');
_$corpus_map = $('canvas#corpus-map');
_$corpus_map.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
backToFrontPage();
});
_$corpus_map
.on('corpus-cliked-on-map', function(e) {
console.log('theme : corpus-cliked-on-map');
backToFrontPage();
})
.on('corpus-cliked-on-node', function(e) {
console.log('theme : corpus-cliked-on-node', e);
_audio_player.loadSound(e.target_node.audio_url);
});
}
// ___ _ _ _
sites/all/themes/custom/edlptheme/assets/styles/app.scss
+34
View File
@@ -20,6 +20,7 @@
}
header[role="banner"]{
position: relative;
padding:0 0 1em 0;
border-bottom: 1px solid red;
pointer-events: all;
@@ -182,6 +183,39 @@ main[role="main"]{
}
// _ _ _ ___ _
// /_\ _ _ __| (_)___| _ \ |__ _ _ _ ___ _ _
// / _ \ || / _` | / _ \ _/ / _` | || / -_) '_|
// /_/ \_\_,_\__,_|_\___/_| |_\__,_|\_, \___|_|
// |__/
#audio-player{
position: absolute;
top:0; left:0;
background-color: white;
height:100%; min-width: 300px; max-width:500px;
z-index: 20;
outline: 1px dotted green;
.time-line{
position: relative;
width:50px; height:1px;
background-color: #000;
overflow: visible;
// border-top: 1px solid #000;
transform: rotateZ(-45deg);
.loader{
width:0; height:100%;
background-color: red;
top:0;left:0;
}
.cursor{
height:10px;width:0;
border-left: 2px solid red;
position:absolute;
left:0; top:-5px;
}
}
}
// _ _ _ _ _
// /_\ (_)__ ___ __ | \| |___ __| |___
// / _ \ | / _` \ \ / | .` / _ \/ _` / -_)