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/modules/figli/edlp_corpus/assets/dist/scripts/corpus.min.js
Vendored
+41 -39
View File
@@ -141,6 +141,8 @@
this.debug = d;
this.mass = 8;
this.velocity_threshold = 0.01;
this.moving = true;
// define radius regarding entries length
switch(true){
case this.entrees.length > 1 & this.entrees.length <= 3:
@@ -202,14 +204,33 @@
};
Node.prototype.onUpdate = function(){
this.checkWallBouncing();
this.updatePos();
// if(this.id == 0){
// console.log(_physics.playing);
// }
if(!this.p.resting()){
this.checkVelocity();
this.checkWallBouncing();
this.updatePos();
}
this.checkMouse();
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
};
Node.prototype.checkVelocity = function(){
if (Math.abs(this.p.velocity.x) < this.velocity_threshold
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){
// console.log('checkVelocity stoping',this.p.velocity);
this.p.velocity.multiplyScalar(0);
// this.moving = false;
// console.log('checkVelocity particule is resting',this.p.resting());
}
// else{
// this.moving = true;
// }
};
Node.prototype.checkWallBouncing = function(){
if(
(this.x < this.wall_limits.left && this.p.velocity.x < 0)
@@ -262,35 +283,11 @@
// - >3 entrees : grand 10px
// actif entouré de rouge
// var d = this.r*2; // diametre
_ctx.beginPath();
// _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
_ctx.fillStyle = edlp_vars[this.e_color];
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
_ctx.closePath();
// _ctx.beginPath();
// _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
// var r,d;
// for (let i = 0; i < this.entrees.length; i++) {
// // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
// // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
// _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
// _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
// r = this.base_radius + (this.g.l+this.g.s)*i; // radius
// d = r*2; // diametre
// if (i == 0) {
// _ctx.fillRect(this.x - r,this.y - r,d,d);
// }
// _ctx.strokeRect(this.x - r,this.y - r,d,d);
// }
// _ctx.closePath();
// _ctx.beginPath();
// _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
// _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
// _ctx.closePath();
};
Node.initialized = true;
@@ -312,14 +309,13 @@
newVelX1, newVelY1, newVelX2, newVelY2,
makeup, angle;
// colisions between _particules
for (var n = 0, l = _nodes.length; n < l; n++) {
// do not collide attracacted away nodes
// if(!p_a.attracted) continue;
for (var q = 0; q < n; q++) {
for (var n = 0; n < _nodes.length; n++) {
for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue;
p_b = _nodes[q].p;
// if(!p_b.attracted) continue;
// if(!_nodes[q].moving) continue;
d = _nodes[n].p.distanceTo(_nodes[q].p);
full_rad = _nodes[n].r + _nodes[q].r;
@@ -383,11 +379,18 @@
})
.on('click', function(event) {
if(event.target.tagName != "A" && event.target.tagName != "INPUT"){
console.log("Corpus : click");
// console.log("Corpus : click");
event.preventDefault();
if(_node_hover_id != -1){
console.log("corpus : click on node", _nodes[_node_hover_id]);
_$canvas.trigger('corpus-cliked-on-node');
// console.log("corpus : click on node", _nodes[_node_hover_id]);
var event = {
'type':'corpus-cliked-on-node',
'target_node':{
'nid':_node_hover_id,
'audio_url':_nodes[_node_hover_id].son_url
},
};
_$canvas.trigger(event);
}else{
console.log('corpus : click on map');
_$canvas.trigger('corpus-cliked-on-map');
@@ -418,7 +421,6 @@
function initNodePopup(){
_node_pop_up = new NodePopUp();
};
function NodePopUp(){
this.visible = false;
this.node;
@@ -431,7 +433,7 @@
if (typeof NodePopUp.initialized == "undefined") {
NodePopUp.prototype.setNode = function(n){
console.log('NodePopUp setNode()');
// console.log('NodePopUp setNode()');
this.node = n;
// positioning NodePopUp regarding node position
this.setPositioning();
@@ -472,7 +474,7 @@
};
NodePopUp.prototype.removeNode = function(){
console.log('NodePopUp removeNode()');
// console.log('NodePopUp removeNode()');
this.node = false;
};
sites/all/modules/figli/edlp_corpus/assets/scripts/corpus.js
+41 -39
View File
@@ -141,6 +141,8 @@
this.debug = d;
this.mass = 8;
this.velocity_threshold = 0.01;
this.moving = true;
// define radius regarding entries length
switch(true){
case this.entrees.length > 1 & this.entrees.length <= 3:
@@ -202,14 +204,33 @@
};
Node.prototype.onUpdate = function(){
this.checkWallBouncing();
this.updatePos();
// if(this.id == 0){
// console.log(_physics.playing);
// }
if(!this.p.resting()){
this.checkVelocity();
this.checkWallBouncing();
this.updatePos();
}
this.checkMouse();
// if(this.debug)
// console.log("Node pos: ", {x:this.x, y:this.y});
this.draw();
};
Node.prototype.checkVelocity = function(){
if (Math.abs(this.p.velocity.x) < this.velocity_threshold
&& Math.abs(this.p.velocity.y) < this.velocity_threshold){
// console.log('checkVelocity stoping',this.p.velocity);
this.p.velocity.multiplyScalar(0);
// this.moving = false;
// console.log('checkVelocity particule is resting',this.p.resting());
}
// else{
// this.moving = true;
// }
};
Node.prototype.checkWallBouncing = function(){
if(
(this.x < this.wall_limits.left && this.p.velocity.x < 0)
@@ -262,35 +283,11 @@
// - >3 entrees : grand 10px
// actif entouré de rouge
// var d = this.r*2; // diametre
_ctx.beginPath();
// _ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
_ctx.fillStyle = edlp_vars[this.e_color];
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
_ctx.closePath();
// _ctx.beginPath();
// _ctx.lineWidth = this.g.l*2;//this.hover ? this.g.l*2 : this.g.l;
// var r,d;
// for (let i = 0; i < this.entrees.length; i++) {
// // _ctx.fillStyle = i == 0 ? _entrees_colors[this.entrees[i]] : "#fff";
// // _ctx.strokeStyle = _entrees_colors[this.entrees[i]];
// _ctx.fillStyle = i == 0 ? edlp_vars['e_col_'+this.entrees[i]] : "#fff";
// _ctx.strokeStyle = edlp_vars['e_col_'+this.entrees[i]];
// r = this.base_radius + (this.g.l+this.g.s)*i; // radius
// d = r*2; // diametre
// if (i == 0) {
// _ctx.fillRect(this.x - r,this.y - r,d,d);
// }
// _ctx.strokeRect(this.x - r,this.y - r,d,d);
// }
// _ctx.closePath();
// _ctx.beginPath();
// _ctx.fillStyle = this.hover ? "red" : this.debug ? "blue" : "black";
// _ctx.fillRect(this.x, this.y, this.base_radius, this.base_radius);
// _ctx.closePath();
};
Node.initialized = true;
@@ -312,14 +309,13 @@
newVelX1, newVelY1, newVelX2, newVelY2,
makeup, angle;
// colisions between _particules
for (var n = 0, l = _nodes.length; n < l; n++) {
// do not collide attracacted away nodes
// if(!p_a.attracted) continue;
for (var q = 0; q < n; q++) {
for (var n = 0; n < _nodes.length; n++) {
for (var q = n+1; q < _nodes.length; q++) {
if(q===n) continue;
p_b = _nodes[q].p;
// if(!p_b.attracted) continue;
// if(!_nodes[q].moving) continue;
d = _nodes[n].p.distanceTo(_nodes[q].p);
full_rad = _nodes[n].r + _nodes[q].r;
@@ -383,11 +379,18 @@
})
.on('click', function(event) {
if(event.target.tagName != "A" && event.target.tagName != "INPUT"){
console.log("Corpus : click");
// console.log("Corpus : click");
event.preventDefault();
if(_node_hover_id != -1){
console.log("corpus : click on node", _nodes[_node_hover_id]);
_$canvas.trigger('corpus-cliked-on-node');
// console.log("corpus : click on node", _nodes[_node_hover_id]);
var event = {
'type':'corpus-cliked-on-node',
'target_node':{
'nid':_node_hover_id,
'audio_url':_nodes[_node_hover_id].son_url
},
};
_$canvas.trigger(event);
}else{
console.log('corpus : click on map');
_$canvas.trigger('corpus-cliked-on-map');
@@ -418,7 +421,6 @@
function initNodePopup(){
_node_pop_up = new NodePopUp();
};
function NodePopUp(){
this.visible = false;
this.node;
@@ -431,7 +433,7 @@
if (typeof NodePopUp.initialized == "undefined") {
NodePopUp.prototype.setNode = function(n){
console.log('NodePopUp setNode()');
// console.log('NodePopUp setNode()');
this.node = n;
// positioning NodePopUp regarding node position
this.setPositioning();
@@ -472,7 +474,7 @@
};
NodePopUp.prototype.removeNode = function(){
console.log('NodePopUp removeNode()');
// console.log('NodePopUp removeNode()');
this.node = false;
};
sites/all/modules/figli/edlp_corpus/src/Controller/CorpusController.php
+9 -10
View File
@@ -24,7 +24,7 @@ class CorpusController extends ControllerBase {
// @see https://chromatichq.com/blog/dependency-injection-drupal-8-plugins
// Get a node storage object.
// $file_storage = \Drupal::entityManager()->getStorage('node')
// $file_storage = \Drupal::entityManager()->getStorage('node');
$response = new JsonResponse();
@@ -57,12 +57,12 @@ class CorpusController extends ControllerBase {
$field_son_values = $node->get('field_son')->getValue();
$son_fid = count($field_son_values) ? $field_son_values[0]['target_id'] : "";
// TODO: how to get this fucking file uri, fuck !!
// $son_file = $file_storage->load($fid);
// $son_file = File::load($son_fid);
// $son_uri = $son_file->url();
// $son_uri = \Drupal\file\Entity\File::load($son_fid);//->getFileUri();
// $son_uri = file_create_url($node->get('field_son')->entity->getFileUri());
$son_file = \Drupal\file\Entity\File::load($son_fid);
$son_url = null;
if($son_file){
$son_uri = $son_file->getFileUri();
$son_url = file_create_url($son_uri);
}
// TODO: favoris marker
@@ -71,9 +71,8 @@ class CorpusController extends ControllerBase {
"title" => $node->get('title')->getString(),
"description" => $description,
"entrees" => $entrees,
"son_fid" => $son_fid,
// "son" => $son_file,
// "popup_content" => render($node_builder), // trop lourd
// "son_fid" => $son_fid,
"son_url" => $son_url,
);
}
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;
}
}
}
// _ _ _ _ _
// /_\ (_)__ ___ __ | \| |___ __| |___
// / _ \ | / _` \ \ / | .` / _ \/ _` / -_)