create interview page

This commit is contained in:
Dryusdan 2017-06-27 23:53:12 +02:00
parent aae5cb43cd
commit 58890f913e
13 changed files with 747 additions and 17 deletions

3
.gitignore vendored
View File

@ -1,3 +1,4 @@
/nbproject/
/assets/img/
/.sass-cache/
/.sass-cache/
/assets/audio/

16
assets/ajax/mail.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div>TODO write content</div>
</body>
</html>

View File

@ -25,7 +25,9 @@
width: 25%;
height: 65%;
margin: auto;
margin-top: 7%; }
margin-top: 7%;
transition: width 0.5s, height 0.5s;
transition-timing-function: ease; }
.startText {
padding-top: 2%;
@ -64,6 +66,15 @@
background-color: #03bd9c; }
.startButton .expose {
background-color: #3b75ad; }
.startButton.top {
top: 0; }
#player {
z-index: 1002;
position: fixed;
top: 0;
background: white;
width: 100%; }
.dialogs {
width: 85%;
@ -94,19 +105,28 @@
display: flex;
flex-flow: row nowrap; }
.soft .opensource {
display: flex;
flex-flow: row wrap;
flex-basis: 50%; }
.soft .opensource div {
cursor: pointer; }
display: inline-block;
cursor: pointer;
height: 10%;
margin: 0;
padding: 0;
line-height: 0;
width: 10%; }
.soft .proprio {
display: flex;
flex-flow: row wrap;
flex-basis: 50%; }
.soft .proprio div {
display: inline-block;
cursor: pointer;
height: 10%;
margin: 0;
padding: 0;
line-height: 0;
width: 10%;
cursor: pointer; }
.soft img {
height: 9%; }
height: 100%; }
*, *:after, *:before {
box-sizing: border-box;

File diff suppressed because one or more lines are too long

View File

@ -2,22 +2,31 @@
display:flex;
flex-flow: row nowrap;
.opensource{
display:flex;
flex-flow: row wrap;
flex-basis: 50%;
div{
cursor:pointer;
display: inline-block;
cursor: pointer;
height: 10%;
margin: 0;
padding: 0;
line-height: 0;
width: 10%;
}
}
.proprio{
display:flex;
flex-flow: row wrap;
flex-basis: 50%;
div{
display: inline-block;
cursor: pointer;
height: 10%;
margin: 0;
padding: 0;
line-height: 0;
width: 10%;
cursor:pointer;
}
}
img{
height:9%;
height:100%;
}
}

View File

@ -7,6 +7,8 @@
height:65%;
margin:auto;
margin-top:7%;
transition: width 0.5s, height 0.5s;
transition-timing-function: ease;
}
.startText{
padding-top:2%;
@ -52,4 +54,14 @@
.expose{
background-color:#3b75ad;
}
&.top{
top:0;
}
}
#player{
z-index: 1002;
position:fixed;
top:0;
background:white;
width:100%;
}

View File

@ -4,6 +4,9 @@ var dialogs;
var badChoise = 0;
var goodChoise = 0;
var screenHeight = window.innerHeight;
var screenWidth = window.innerWidth;
function setTime(ts) {
var date = new Date(ts);
$('.time').text(date.toLocaleString(navigator.language, {
@ -37,6 +40,8 @@ function Window(settings) {
// METHODS
this.setContent = function (content) {
console.log(content);
console.log(this.content);
this.content = content || null;
var $content = $('#' + this.id).find('.content');
if (this.content) {
@ -140,6 +145,28 @@ function changeMailClient(){
$("#dialogsNext").off('click');
$('.overlay').fadeOut(500);
$(".dialogs").fadeOut(500);
$("#thunderbird").on('click', function(){
goodChoise++;
var w = new Window({
top: screenHeight/5,
left: screenWidth/4,
title: 'Thunderbird',
close: true,
draggable: true,
content: 'mail'
});
});
$("#outlook").on('click', function(){
badChoise++;
var w = new Window({
top: screenHeight/5,
left: screenWidth/4,
title: 'Outlook',
close: true,
draggable: true,
content: 'mail'
});
});
});
}
@ -154,4 +181,45 @@ function typeWriter(text, n) {
else{
$('#dialogsNext').css('display', "block");
}
}
}
/**
* display new page to load expose
*/
$('#expose').on('click', function(){
var startMenu = $(".startMenu");
startMenu.css('height', '70%');
startMenu.css('width', '70%');
startMenu.html($('.startButton'));
$('.startButton').addClass('top');
$('#play').html('Écouter l\'interview');
$('#play').attr('data-action', 'play');
$('.expose').html('Télécharger l\'interview');
$('body').append('<div id="player"><div id="waveform">d</div>"></div>');
var wavesurfer = Object.create(WaveSurfer);
// Init
wavesurfer.init({
container: document.querySelector('#waveform'),
waveColor: '#3b75ad',
progressColor: '#304559',
backend: 'MediaElement',
height: 20,
barHeight: 50
});
// Load audio from URL
wavesurfer.load('assets/audio/interview.mp3');
document.querySelector(
'[data-action="play"]'
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
document.querySelector(
'[data-action="peaks"]'
).addEventListener('click', function () {
wavesurfer.load('assets/audio/Rip_Tear.mp3', [
0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
]);
document.body.scrollTop = 0;
});
});

13
assets/js/jquery-ui-1.11.2.min.js vendored Normal file

File diff suppressed because one or more lines are too long

0
assets/js/player.js Normal file
View File

6
assets/js/wavesurfer.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,514 @@
'use strict';
/* Regions manager */
WaveSurfer.Regions = {
init: function (wavesurfer) {
this.wavesurfer = wavesurfer;
this.wrapper = this.wavesurfer.drawer.wrapper;
/* Id-based hash of regions. */
this.list = {};
},
/* Add a region. */
add: function (params) {
var region = Object.create(WaveSurfer.Region);
region.init(params, this.wavesurfer);
this.list[region.id] = region;
region.on('remove', (function () {
delete this.list[region.id];
}).bind(this));
return region;
},
/* Remove all regions. */
clear: function () {
Object.keys(this.list).forEach(function (id) {
this.list[id].remove();
}, this);
},
enableDragSelection: function (params) {
var my = this;
var drag;
var start;
var region;
var touchId;
var slop = params.slop || 2;
var pxMove = 0;
var eventDown = function (e) {
if (e.touches && e.touches.length > 1) { return; }
// Check whether the click/tap is on the bottom-most DOM element
// Effectively prevent clicks on the scrollbar from registering as
// region creation.
if (e.target.childElementCount > 0) { return; }
touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
drag = true;
start = my.wavesurfer.drawer.handleEvent(e, true);
region = null;
};
this.wrapper.addEventListener('mousedown', eventDown);
this.wrapper.addEventListener('touchstart', eventDown);
this.on('disable-drag-selection', function() {
my.wrapper.removeEventListener('touchstart', eventDown);
my.wrapper.removeEventListener('mousedown', eventDown);
});
var eventUp = function (e) {
if (e.touches && e.touches.length > 1) { return; }
drag = false;
pxMove = 0;
if (region) {
region.fireEvent('update-end', e);
my.wavesurfer.fireEvent('region-update-end', region, e);
}
region = null;
};
this.wrapper.addEventListener('mouseup', eventUp);
this.wrapper.addEventListener('touchend', eventUp);
this.on('disable-drag-selection', function() {
my.wrapper.removeEventListener('touchend', eventUp);
my.wrapper.removeEventListener('mouseup', eventUp);
});
var eventMove = function (e) {
if (!drag) { return; }
if (++pxMove <= slop) { return; }
if (e.touches && e.touches.length > 1) { return; }
if (e.targetTouches && e.targetTouches[0].identifier != touchId) { return; }
if (!region) {
region = my.add(params || {});
}
var duration = my.wavesurfer.getDuration();
var end = my.wavesurfer.drawer.handleEvent(e);
region.update({
start: Math.min(end * duration, start * duration),
end: Math.max(end * duration, start * duration)
});
};
this.wrapper.addEventListener('mousemove', eventMove);
this.wrapper.addEventListener('touchmove', eventMove);
this.on('disable-drag-selection', function() {
my.wrapper.removeEventListener('touchmove', eventMove);
my.wrapper.removeEventListener('mousemove', eventMove);
});
},
disableDragSelection: function () {
this.fireEvent('disable-drag-selection');
}
};
WaveSurfer.util.extend(WaveSurfer.Regions, WaveSurfer.Observer);
WaveSurfer.Region = {
/* Helper function to assign CSS styles. */
style: WaveSurfer.Drawer.style,
init: function (params, wavesurfer) {
this.wavesurfer = wavesurfer;
this.wrapper = wavesurfer.drawer.wrapper;
this.id = params.id == null ? WaveSurfer.util.getId() : params.id;
this.start = Number(params.start) || 0;
this.end = params.end == null ?
// small marker-like region
this.start + (4 / this.wrapper.scrollWidth) * this.wavesurfer.getDuration() :
Number(params.end);
this.resize = params.resize === undefined ? true : Boolean(params.resize);
this.drag = params.drag === undefined ? true : Boolean(params.drag);
this.loop = Boolean(params.loop);
this.color = params.color || 'rgba(0, 0, 0, 0.1)';
this.data = params.data || {};
this.attributes = params.attributes || {};
this.maxLength = params.maxLength;
this.minLength = params.minLength;
this.bindInOut();
this.render();
this.onZoom = this.updateRender.bind(this);
this.wavesurfer.on('zoom', this.onZoom);
this.wavesurfer.fireEvent('region-created', this);
},
/* Update region params. */
update: function (params) {
if (null != params.start) {
this.start = Number(params.start);
}
if (null != params.end) {
this.end = Number(params.end);
}
if (null != params.loop) {
this.loop = Boolean(params.loop);
}
if (null != params.color) {
this.color = params.color;
}
if (null != params.data) {
this.data = params.data;
}
if (null != params.resize) {
this.resize = Boolean(params.resize);
}
if (null != params.drag) {
this.drag = Boolean(params.drag);
}
if (null != params.maxLength) {
this.maxLength = Number(params.maxLength);
}
if (null != params.minLength) {
this.minLength = Number(params.minLength);
}
if (null != params.attributes) {
this.attributes = params.attributes;
}
this.updateRender();
this.fireEvent('update');
this.wavesurfer.fireEvent('region-updated', this);
},
/* Remove a single region. */
remove: function () {
if (this.element) {
this.wrapper.removeChild(this.element);
this.element = null;
this.wavesurfer.un('zoom', this.onZoom);
this.fireEvent('remove');
this.wavesurfer.fireEvent('region-removed', this);
}
},
/* Play the audio region. */
play: function () {
this.wavesurfer.play(this.start, this.end);
this.fireEvent('play');
this.wavesurfer.fireEvent('region-play', this);
},
/* Play the region in loop. */
playLoop: function () {
this.play();
this.once('out', this.playLoop.bind(this));
},
/* Render a region as a DOM element. */
render: function () {
var regionEl = document.createElement('region');
regionEl.className = 'wavesurfer-region';
regionEl.title = this.formatTime(this.start, this.end);
regionEl.setAttribute('data-id', this.id);
for (var attrname in this.attributes) {
regionEl.setAttribute('data-region-' + attrname, this.attributes[attrname]);
}
var width = this.wrapper.scrollWidth;
this.style(regionEl, {
position: 'absolute',
zIndex: 2,
height: '100%',
top: '0px'
});
/* Resize handles */
if (this.resize) {
var handleLeft = regionEl.appendChild(document.createElement('handle'));
var handleRight = regionEl.appendChild(document.createElement('handle'));
handleLeft.className = 'wavesurfer-handle wavesurfer-handle-start';
handleRight.className = 'wavesurfer-handle wavesurfer-handle-end';
var css = {
cursor: 'col-resize',
position: 'absolute',
left: '0px',
top: '0px',
width: '1%',
maxWidth: '4px',
height: '100%'
};
this.style(handleLeft, css);
this.style(handleRight, css);
this.style(handleRight, {
left: '100%'
});
}
this.element = this.wrapper.appendChild(regionEl);
this.updateRender();
this.bindEvents(regionEl);
},
formatTime: function (start, end) {
return (start == end ? [ start ] : [ start, end ]).map(function (time) {
return [
Math.floor((time % 3600) / 60), // minutes
('00' + Math.floor(time % 60)).slice(-2) // seconds
].join(':');
}).join('-');
},
getWidth: function () {
return this.wavesurfer.drawer.width / this.wavesurfer.params.pixelRatio;
},
/* Update element's position, width, color. */
updateRender: function () {
var dur = this.wavesurfer.getDuration();
var width = this.getWidth();
if (this.start < 0) {
this.start = 0;
this.end = this.end - this.start;
}
if (this.end > dur) {
this.end = dur;
this.start = dur - (this.end - this.start);
}
if (this.minLength != null) {
this.end = Math.max(this.start + this.minLength, this.end);
}
if (this.maxLength != null) {
this.end = Math.min(this.start + this.maxLength, this.end);
}
if (this.element != null) {
// Calculate the left and width values of the region such that
// no gaps appear between regions.
var left = Math.round(this.start / dur * width);
var regionWidth =
Math.round(this.end / dur * width) - left;
this.style(this.element, {
left: left + 'px',
width: regionWidth + 'px',
backgroundColor: this.color,
cursor: this.drag ? 'move' : 'default'
});
for (var attrname in this.attributes) {
this.element.setAttribute('data-region-' + attrname, this.attributes[attrname]);
}
this.element.title = this.formatTime(this.start, this.end);
}
},
/* Bind audio events. */
bindInOut: function () {
var my = this;
my.firedIn = false;
my.firedOut = false;
var onProcess = function (time) {
if (!my.firedOut && my.firedIn && (my.start >= Math.round(time * 100) / 100 || my.end <= Math.round(time * 100) / 100)) {
my.firedOut = true;
my.firedIn = false;
my.fireEvent('out');
my.wavesurfer.fireEvent('region-out', my);
}
if (!my.firedIn && my.start <= time && my.end > time) {
my.firedIn = true;
my.firedOut = false;
my.fireEvent('in');
my.wavesurfer.fireEvent('region-in', my);
}
};
this.wavesurfer.backend.on('audioprocess', onProcess);
this.on('remove', function () {
my.wavesurfer.backend.un('audioprocess', onProcess);
});
/* Loop playback. */
this.on('out', function () {
if (my.loop) {
my.wavesurfer.play(my.start);
}
});
},
/* Bind DOM events. */
bindEvents: function () {
var my = this;
this.element.addEventListener('mouseenter', function (e) {
my.fireEvent('mouseenter', e);
my.wavesurfer.fireEvent('region-mouseenter', my, e);
});
this.element.addEventListener('mouseleave', function (e) {
my.fireEvent('mouseleave', e);
my.wavesurfer.fireEvent('region-mouseleave', my, e);
});
this.element.addEventListener('click', function (e) {
e.preventDefault();
my.fireEvent('click', e);
my.wavesurfer.fireEvent('region-click', my, e);
});
this.element.addEventListener('dblclick', function (e) {
e.stopPropagation();
e.preventDefault();
my.fireEvent('dblclick', e);
my.wavesurfer.fireEvent('region-dblclick', my, e);
});
/* Drag or resize on mousemove. */
(this.drag || this.resize) && (function () {
var duration = my.wavesurfer.getDuration();
var drag;
var resize;
var startTime;
var touchId;
var onDown = function (e) {
if (e.touches && e.touches.length > 1) { return; }
touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
e.stopPropagation();
startTime = my.wavesurfer.drawer.handleEvent(e, true) * duration;
if (e.target.tagName.toLowerCase() == 'handle') {
if (e.target.classList.contains('wavesurfer-handle-start')) {
resize = 'start';
} else {
resize = 'end';
}
} else {
drag = true;
resize = false;
}
};
var onUp = function (e) {
if (e.touches && e.touches.length > 1) { return; }
if (drag || resize) {
drag = false;
resize = false;
my.fireEvent('update-end', e);
my.wavesurfer.fireEvent('region-update-end', my, e);
}
};
var onMove = function (e) {
if (e.touches && e.touches.length > 1) { return; }
if (e.targetTouches && e.targetTouches[0].identifier != touchId) { return; }
if (drag || resize) {
var time = my.wavesurfer.drawer.handleEvent(e) * duration;
var delta = time - startTime;
startTime = time;
// Drag
if (my.drag && drag) {
my.onDrag(delta);
}
// Resize
if (my.resize && resize) {
my.onResize(delta, resize);
}
}
};
my.element.addEventListener('mousedown', onDown);
my.element.addEventListener('touchstart', onDown);
my.wrapper.addEventListener('mousemove', onMove);
my.wrapper.addEventListener('touchmove', onMove);
document.body.addEventListener('mouseup', onUp);
document.body.addEventListener('touchend', onUp);
my.on('remove', function () {
document.body.removeEventListener('mouseup', onUp);
document.body.removeEventListener('touchend', onUp);
my.wrapper.removeEventListener('mousemove', onMove);
my.wrapper.removeEventListener('touchmove', onMove);
});
my.wavesurfer.on('destroy', function () {
document.body.removeEventListener('mouseup', onUp);
document.body.removeEventListener('touchend', onUp);
});
}());
},
onDrag: function (delta) {
var maxEnd = this.wavesurfer.getDuration();
if ((this.end + delta) > maxEnd || (this.start + delta) < 0) {
return;
}
this.update({
start: this.start + delta,
end: this.end + delta
});
},
onResize: function (delta, direction) {
if (direction == 'start') {
this.update({
start: Math.min(this.start + delta, this.end),
end: Math.max(this.start + delta, this.end)
});
} else {
this.update({
start: Math.min(this.end + delta, this.start),
end: Math.max(this.end + delta, this.start)
});
}
}
};
WaveSurfer.util.extend(WaveSurfer.Region, WaveSurfer.Observer);
/* Augment WaveSurfer with region methods. */
WaveSurfer.initRegions = function () {
if (!this.regions) {
this.regions = Object.create(WaveSurfer.Regions);
this.regions.init(this);
}
};
WaveSurfer.addRegion = function (options) {
this.initRegions();
return this.regions.add(options);
};
WaveSurfer.clearRegions = function () {
this.regions && this.regions.clear();
};
WaveSurfer.enableDragSelection = function (options) {
this.initRegions();
this.regions.enableDragSelection(options);
};
WaveSurfer.disableDragSelection = function () {
this.regions.disableDragSelection();
};

View File

@ -50,7 +50,7 @@
Jouer
</div>
<div class="expose" id="expose">
Voir l'exposé
Écouter l'interview
</div>
</div>
</div>
@ -59,6 +59,10 @@
<div id="dialogsNext">Cliquez ici pour continuer</div>
</div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/jquery-ui-1.11.2.min.js"></script>
<script src="assets/js/wavesurfer.min.js"></script>
<script src="assets/js/wavesurfer.regions.js"></script>
<script src="assets/js/app.js"></script>
<script src="assets/js/player.js"></script>
</body>
</html>

67
player.html Normal file
View File

@ -0,0 +1,67 @@
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="demo">
<div id="waveform">
<!-- Here be the waveform -->
</div>
<div class="controls">
<button class="btn btn-primary" data-action="play">
<i class="glyphicon glyphicon-play"></i>
Play
/
<i class="glyphicon glyphicon-pause"></i>
Pause
</button>
</div>
</div>
<script src="assets/js/jquery-3.2.1.min.js"></script>
<script src="assets/js/wavesurfer.min.js"></script>
<script src="assets/js/wavesurfer.regions.js"></script>
<script>
'use strict';
// Create an instance
var wavesurfer = Object.create(WaveSurfer);
// Init & load audio file
document.addEventListener('DOMContentLoaded', function () {
// Init
wavesurfer.init({
container: document.querySelector('#waveform'),
waveColor: '#3b75ad',
progressColor: '#304559',
backend: 'MediaElement'
});
// Load audio from URL
wavesurfer.load('assets/audio/interview.mp3');
document.querySelector(
'[data-action="play"]'
).addEventListener('click', wavesurfer.playPause.bind(wavesurfer));
document.querySelector(
'[data-action="peaks"]'
).addEventListener('click', function () {
wavesurfer.load('assets/audio/Rip_Tear.mp3', [
0.0218, 0.0183, 0.0165, 0.0198, 0.2137, 0.2888, 0.2313, 0.15, 0.2542, 0.2538, 0.2358, 0.1195, 0.1591, 0.2599, 0.2742, 0.1447, 0.2328, 0.1878, 0.1988, 0.1645, 0.1218, 0.2005, 0.2828, 0.2051, 0.1664, 0.1181, 0.1621, 0.2966, 0.189, 0.246, 0.2445, 0.1621, 0.1618, 0.189, 0.2354, 0.1561, 0.1638, 0.2799, 0.0923, 0.1659, 0.1675, 0.1268, 0.0984, 0.0997, 0.1248, 0.1495, 0.1431, 0.1236, 0.1755, 0.1183, 0.1349, 0.1018, 0.1109, 0.1833, 0.1813, 0.1422, 0.0961, 0.1191, 0.0791, 0.0631, 0.0315, 0.0157, 0.0166, 0.0108
]);
document.body.scrollTop = 0;
});
});
</script>
</body>
</html>