Skip to content

Commit

Permalink
added volume control
Browse files Browse the repository at this point in the history
  • Loading branch information
@edsilv
edsilv committed Dec 12, 2017
1 parent 383bb88 commit d4b8230
Show file tree
Hide file tree
Showing 7 changed files with 88 additions and 53 deletions.
2 changes: 1 addition & 1 deletion dist/iiif-av-component.bundle.js
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions dist/iiif-av-component.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ declare namespace IIIFComponents {
initContents(): void;
private _convertToPercentage(pixelValue, maxValue);
private _renderMediaElement(data);
setVolume(value: number): void;
private _renderSyncIndicator(mediaElementData);
setCurrentTime(seconds: string | number): void;
play(withoutUpdate?: boolean): void;
Expand Down
38 changes: 24 additions & 14 deletions dist/iiif-av-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ var IIIFComponents;
var $controlsContainer = $('<div class="controlsContainer"></div>');
var $playButton = $('<button class="playButton">' + this.options.data.content.play + '</button>');
var $timingControls = $('<span>' + this.options.data.content.currentTime + ': <span class="canvasTime"></span> / ' + this.options.data.content.duration + ': <span class="canvasDuration"></span></span>');
$controlsContainer.append($playButton, $timingControls);
var $volumeControl = $('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">');
$controlsContainer.append($playButton, $timingControls, $volumeControl);
$optionsContainer.append($timelineContainer, $timelineItemContainer, $controlsContainer);
$player.append($canvasContainer, $optionsContainer);
this._$element.append($player);
Expand Down Expand Up @@ -138,6 +139,9 @@ var IIIFComponents;
canvasInstance.play();
}
});
$volumeControl.on('change', function () {
canvasInstance.setVolume(Number(this.value));
});
canvasInstance.setCurrentTime(0);
if (this.options.data.autoPlay) {
canvasInstance.play();
Expand Down Expand Up @@ -341,30 +345,30 @@ var IIIFComponents;
return percentage;
};
CanvasInstance.prototype._renderMediaElement = function (data) {
var mediaElement;
var $mediaElement;
switch (data.type) {
case 'Image':
mediaElement = $('<img class="anno" src="' + data.source + '" />');
$mediaElement = $('<img class="anno" src="' + data.source + '" />');
break;
case 'Video':
mediaElement = $('<video class="anno" src="' + data.source + '" />');
$mediaElement = $('<video class="anno" src="' + data.source + '" />');
break;
case 'Audio':
mediaElement = $('<audio class="anno" src="' + data.source + '" />');
$mediaElement = $('<audio class="anno" src="' + data.source + '" />');
break;
case 'TextualBody':
mediaElement = $('<div class="anno">' + data.source + '</div>');
$mediaElement = $('<div class="anno">' + data.source + '</div>');
break;
default:
return;
}
mediaElement.css({
$mediaElement.css({
top: data.top + '%',
left: data.left + '%',
width: data.width + '%',
height: data.height + '%'
}).hide();
data.element = mediaElement;
data.element = $mediaElement;
if (data.type == 'Video' || data.type == 'Audio') {
data.timeout = null;
var that_1 = this;
Expand Down Expand Up @@ -393,27 +397,33 @@ var IIIFComponents;
this._mediaElements.push(data);
if (this.$playerElement) {
var targetElement = this.$playerElement.find('.canvasContainer');
targetElement.append(mediaElement);
targetElement.append($mediaElement);
}
if (data.type == 'Video' || data.type == 'Audio') {
var self_1 = data;
mediaElement.on('loadstart', function () {
$mediaElement.on('loadstart', function () {
//console.log('loadstart');
self_1.checkForStall();
});
mediaElement.on('waiting', function () {
$mediaElement.on('waiting', function () {
//console.log('waiting');
self_1.checkForStall();
});
mediaElement.on('seeking', function () {
$mediaElement.on('seeking', function () {
//console.log('seeking');
//self.checkForStall();
});
mediaElement.attr('preload', 'auto');
mediaElement.get(0).load(); // todo: type
$mediaElement.attr('preload', 'auto');
$mediaElement.get(0).load(); // todo: type
}
this._renderSyncIndicator(data);
};
CanvasInstance.prototype.setVolume = function (value) {
for (var i = 0; i < this._mediaElements.length; i++) {
var $mediaElement = this._mediaElements[i];
$($mediaElement.element).prop("volume", value);
}
};
CanvasInstance.prototype._renderSyncIndicator = function (mediaElementData) {
var leftPercent = this._convertToPercentage(mediaElementData.start, this.canvasClockDuration);
var widthPercent = this._convertToPercentage(mediaElementData.end - mediaElementData.start, this.canvasClockDuration);
Expand Down
2 changes: 1 addition & 1 deletion dist/iiif-av-component.min.js
View file

Large diffs are not rendered by default.

38 changes: 24 additions & 14 deletions examples/js/iiif-av-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,8 @@ var IIIFComponents;
var $controlsContainer = $('<div class="controlsContainer"></div>');
var $playButton = $('<button class="playButton">' + this.options.data.content.play + '</button>');
var $timingControls = $('<span>' + this.options.data.content.currentTime + ': <span class="canvasTime"></span> / ' + this.options.data.content.duration + ': <span class="canvasDuration"></span></span>');
$controlsContainer.append($playButton, $timingControls);
var $volumeControl = $('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">');
$controlsContainer.append($playButton, $timingControls, $volumeControl);
$optionsContainer.append($timelineContainer, $timelineItemContainer, $controlsContainer);
$player.append($canvasContainer, $optionsContainer);
this._$element.append($player);
Expand Down Expand Up @@ -138,6 +139,9 @@ var IIIFComponents;
canvasInstance.play();
}
});
$volumeControl.on('change', function () {
canvasInstance.setVolume(Number(this.value));
});
canvasInstance.setCurrentTime(0);
if (this.options.data.autoPlay) {
canvasInstance.play();
Expand Down Expand Up @@ -341,30 +345,30 @@ var IIIFComponents;
return percentage;
};
CanvasInstance.prototype._renderMediaElement = function (data) {
var mediaElement;
var $mediaElement;
switch (data.type) {
case 'Image':
mediaElement = $('<img class="anno" src="' + data.source + '" />');
$mediaElement = $('<img class="anno" src="' + data.source + '" />');
break;
case 'Video':
mediaElement = $('<video class="anno" src="' + data.source + '" />');
$mediaElement = $('<video class="anno" src="' + data.source + '" />');
break;
case 'Audio':
mediaElement = $('<audio class="anno" src="' + data.source + '" />');
$mediaElement = $('<audio class="anno" src="' + data.source + '" />');
break;
case 'TextualBody':
mediaElement = $('<div class="anno">' + data.source + '</div>');
$mediaElement = $('<div class="anno">' + data.source + '</div>');
break;
default:
return;
}
mediaElement.css({
$mediaElement.css({
top: data.top + '%',
left: data.left + '%',
width: data.width + '%',
height: data.height + '%'
}).hide();
data.element = mediaElement;
data.element = $mediaElement;
if (data.type == 'Video' || data.type == 'Audio') {
data.timeout = null;
var that_1 = this;
Expand Down Expand Up @@ -393,27 +397,33 @@ var IIIFComponents;
this._mediaElements.push(data);
if (this.$playerElement) {
var targetElement = this.$playerElement.find('.canvasContainer');
targetElement.append(mediaElement);
targetElement.append($mediaElement);
}
if (data.type == 'Video' || data.type == 'Audio') {
var self_1 = data;
mediaElement.on('loadstart', function () {
$mediaElement.on('loadstart', function () {
//console.log('loadstart');
self_1.checkForStall();
});
mediaElement.on('waiting', function () {
$mediaElement.on('waiting', function () {
//console.log('waiting');
self_1.checkForStall();
});
mediaElement.on('seeking', function () {
$mediaElement.on('seeking', function () {
//console.log('seeking');
//self.checkForStall();
});
mediaElement.attr('preload', 'auto');
mediaElement.get(0).load(); // todo: type
$mediaElement.attr('preload', 'auto');
$mediaElement.get(0).load(); // todo: type
}
this._renderSyncIndicator(data);
};
CanvasInstance.prototype.setVolume = function (value) {
for (var i = 0; i < this._mediaElements.length; i++) {
var $mediaElement = this._mediaElements[i];
$($mediaElement.element).prop("volume", value);
}
};
CanvasInstance.prototype._renderSyncIndicator = function (mediaElementData) {
var leftPercent = this._convertToPercentage(mediaElementData.start, this.canvasClockDuration);
var widthPercent = this._convertToPercentage(mediaElementData.end - mediaElementData.start, this.canvasClockDuration);
Expand Down
25 changes: 15 additions & 10 deletions src/AVComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,16 +77,17 @@ namespace IIIFComponents {

private _initCanvas(canvas: Manifesto.ICanvas): void {

const $player = $('<div class="player"></div>');
const $canvasContainer = $('<div class="canvasContainer"></div>');
const $optionsContainer = $('<div class="optionsContainer"></div>');
const $timelineContainer = $('<div class="timelineContainer"></div>');
const $timelineItemContainer = $('<div class="timelineItemContainer"></div>');
const $controlsContainer = $('<div class="controlsContainer"></div>');
const $playButton = $('<button class="playButton">' + this.options.data.content.play + '</button>');
const $timingControls = $('<span>' + this.options.data.content.currentTime + ': <span class="canvasTime"></span> / ' + this.options.data.content.duration + ': <span class="canvasDuration"></span></span>');

$controlsContainer.append($playButton, $timingControls);
const $player: JQuery = $('<div class="player"></div>');
const $canvasContainer: JQuery = $('<div class="canvasContainer"></div>');
const $optionsContainer: JQuery = $('<div class="optionsContainer"></div>');
const $timelineContainer: JQuery = $('<div class="timelineContainer"></div>');
const $timelineItemContainer: JQuery = $('<div class="timelineItemContainer"></div>');
const $controlsContainer: JQuery = $('<div class="controlsContainer"></div>');
const $playButton: JQuery = $('<button class="playButton">' + this.options.data.content.play + '</button>');
const $timingControls: JQuery = $('<span>' + this.options.data.content.currentTime + ': <span class="canvasTime"></span> / ' + this.options.data.content.duration + ': <span class="canvasDuration"></span></span>');
const $volumeControl: JQuery<HTMLInputElement> = $('<input type="range" class="volume" min="0" max="1" step="0.01" value="1">') as JQuery<HTMLInputElement>;

$controlsContainer.append($playButton, $timingControls, $volumeControl);
$optionsContainer.append($timelineContainer, $timelineItemContainer, $controlsContainer);
$player.append($canvasContainer, $optionsContainer);

Expand Down Expand Up @@ -155,6 +156,10 @@ namespace IIIFComponents {
}

});

$volumeControl.on('change', function() {
canvasInstance.setVolume(Number(this.value));
});

canvasInstance.setCurrentTime(0);

Expand Down
35 changes: 22 additions & 13 deletions src/CanvasInstance.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,33 +141,33 @@ namespace IIIFComponents {

private _renderMediaElement(data: any): void {

let mediaElement;
let $mediaElement;

switch(data.type) {
case 'Image':
mediaElement = $('<img class="anno" src="' + data.source + '" />');
$mediaElement = $('<img class="anno" src="' + data.source + '" />');
break;
case 'Video':
mediaElement = $('<video class="anno" src="' + data.source + '" />');
$mediaElement = $('<video class="anno" src="' + data.source + '" />');
break;
case 'Audio':
mediaElement = $('<audio class="anno" src="' + data.source + '" />');
$mediaElement = $('<audio class="anno" src="' + data.source + '" />');
break;
case 'TextualBody':
mediaElement = $('<div class="anno">' + data.source + '</div>');
$mediaElement = $('<div class="anno">' + data.source + '</div>');
break;
default:
return;
}

mediaElement.css({
$mediaElement.css({
top: data.top + '%',
left: data.left + '%',
width: data.width + '%',
height: data.height + '%'
}).hide();

data.element = mediaElement;
data.element = $mediaElement;

if (data.type == 'Video' || data.type == 'Audio') {

Expand Down Expand Up @@ -204,31 +204,40 @@ namespace IIIFComponents {

if (this.$playerElement) {
const targetElement: JQuery = this.$playerElement.find('.canvasContainer');
targetElement.append(mediaElement);
targetElement.append($mediaElement);
}

if (data.type == 'Video' || data.type == 'Audio') {
const self = data;
mediaElement.on('loadstart', function() {
$mediaElement.on('loadstart', function() {
//console.log('loadstart');
self.checkForStall();
});
mediaElement.on('waiting', function() {
$mediaElement.on('waiting', function() {
//console.log('waiting');
self.checkForStall();
});
mediaElement.on('seeking', function() {
$mediaElement.on('seeking', function() {
//console.log('seeking');
//self.checkForStall();
});
mediaElement.attr('preload', 'auto');
(<any>mediaElement.get(0)).load(); // todo: type
$mediaElement.attr('preload', 'auto');
(<any>$mediaElement.get(0)).load(); // todo: type
}

this._renderSyncIndicator(data);

}

public setVolume(value: number): void {

for (let i = 0; i < this._mediaElements.length; i++) {
const $mediaElement = this._mediaElements[i];
$($mediaElement.element).prop("volume", value);
}

}

private _renderSyncIndicator(mediaElementData: any) {

const leftPercent: number = this._convertToPercentage(mediaElementData.start, this.canvasClockDuration);
Expand Down

0 comments on commit d4b8230

Please sign in to comment.