mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-04-05 10:05:51 +02:00
359 lines
12 KiB
JavaScript
359 lines
12 KiB
JavaScript
//
|
|
// Recorder.js
|
|
// examples
|
|
//
|
|
// Created by Clément Brisset on 8/20/14.
|
|
// Copyright 2014 High Fidelity, Inc.
|
|
//
|
|
// Distributed under the Apache License, Version 2.0.
|
|
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
|
|
//
|
|
|
|
/* globals Tool, ToolBar */
|
|
|
|
Script.include("/~/system/libraries/toolBars.js");
|
|
|
|
var recordingFile = "recording.hfr";
|
|
|
|
function setDefaultPlayerOptions() {
|
|
Recording.setPlayFromCurrentLocation(true);
|
|
Recording.setPlayerUseDisplayName(false);
|
|
Recording.setPlayerUseAttachments(false);
|
|
Recording.setPlayerUseHeadModel(false);
|
|
Recording.setPlayerUseSkeletonModel(true);
|
|
}
|
|
|
|
var windowDimensions = Controller.getViewportDimensions();
|
|
var TOOL_ICON_URL = Script.getExternalPath(Script.ExternalPaths.Assets, + "images/tools/");
|
|
var ALPHA_ON = 1.0;
|
|
var ALPHA_OFF = 0.7;
|
|
var COLOR_ON = { red: 128, green: 0, blue: 0 };
|
|
var COLOR_OFF = { red: 128, green: 128, blue: 128 };
|
|
var COLOR_TOOL_BAR = { red: 0, green: 0, blue: 0 };
|
|
|
|
var toolBar = null;
|
|
var recordIcon;
|
|
var playIcon;
|
|
var playLoopIcon;
|
|
var saveIcon;
|
|
var loadIcon;
|
|
var spacing;
|
|
var timerOffset;
|
|
var timer = null;
|
|
var slider = null;
|
|
|
|
setupToolBar();
|
|
setupTimer();
|
|
|
|
var watchStop = false;
|
|
|
|
function setupToolBar() {
|
|
if (toolBar !== null) {
|
|
print("Multiple calls to Recorder.js:setupToolBar()");
|
|
return;
|
|
}
|
|
Tool.IMAGE_HEIGHT /= 2;
|
|
Tool.IMAGE_WIDTH /= 2;
|
|
|
|
toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL);
|
|
|
|
toolBar.onMove = onToolbarMove;
|
|
|
|
toolBar.setBack(COLOR_TOOL_BAR, ALPHA_OFF);
|
|
|
|
recordIcon = toolBar.addTool({
|
|
imageURL: TOOL_ICON_URL + "recording-record.svg",
|
|
subImage: { x: 0, y: 0, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },
|
|
x: 0, y: 0,
|
|
width: Tool.IMAGE_WIDTH,
|
|
height: Tool.IMAGE_HEIGHT,
|
|
alpha: Recording.isPlaying() ? ALPHA_OFF : ALPHA_ON,
|
|
visible: true
|
|
}, true, !Recording.isRecording());
|
|
|
|
var playLoopWidthFactor = 1.65;
|
|
playIcon = toolBar.addTool({
|
|
imageURL: TOOL_ICON_URL + "play-pause.svg",
|
|
width: playLoopWidthFactor * Tool.IMAGE_WIDTH,
|
|
height: Tool.IMAGE_HEIGHT,
|
|
alpha: (Recording.isRecording() || Recording.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON,
|
|
visible: true
|
|
}, false);
|
|
|
|
playLoopIcon = toolBar.addTool({
|
|
imageURL: TOOL_ICON_URL + "play-and-loop.svg",
|
|
subImage: { x: 0, y: 0, width: playLoopWidthFactor * Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },
|
|
width: playLoopWidthFactor * Tool.IMAGE_WIDTH,
|
|
height: Tool.IMAGE_HEIGHT,
|
|
alpha: (Recording.isRecording() || Recording.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON,
|
|
visible: true
|
|
}, false);
|
|
|
|
timerOffset = toolBar.width + ToolBar.SPACING;
|
|
spacing = toolBar.addSpacing(0);
|
|
|
|
saveIcon = toolBar.addTool({
|
|
imageURL: TOOL_ICON_URL + "recording-save.svg",
|
|
width: Tool.IMAGE_WIDTH,
|
|
height: Tool.IMAGE_HEIGHT,
|
|
alpha: (Recording.isRecording() || Recording.isPlaying() || Recording.playerLength() === 0) ? ALPHA_OFF : ALPHA_ON,
|
|
visible: true
|
|
}, false);
|
|
|
|
loadIcon = toolBar.addTool({
|
|
imageURL: TOOL_ICON_URL + "recording-upload.svg",
|
|
width: Tool.IMAGE_WIDTH,
|
|
height: Tool.IMAGE_HEIGHT,
|
|
alpha: (Recording.isRecording() || Recording.isPlaying()) ? ALPHA_OFF : ALPHA_ON,
|
|
visible: true
|
|
}, false);
|
|
}
|
|
|
|
function setupTimer() {
|
|
timer = Overlays.addOverlay("text", {
|
|
font: { size: 15 },
|
|
text: (0.00).toFixed(3),
|
|
backgroundColor: COLOR_OFF,
|
|
x: 0, y: 0,
|
|
width: 200, height: 25,
|
|
leftMargin: 5, topMargin: 3,
|
|
alpha: 1.0, backgroundAlpha: 1.0,
|
|
visible: true
|
|
});
|
|
|
|
slider = { x: 0, y: 0,
|
|
w: 200, h: 20,
|
|
pos: 0.0 // 0.0 <= pos <= 1.0
|
|
};
|
|
slider.background = Overlays.addOverlay("text", {
|
|
text: "",
|
|
backgroundColor: { red: 128, green: 128, blue: 128 },
|
|
x: slider.x, y: slider.y,
|
|
width: slider.w,
|
|
height: slider.h,
|
|
alpha: 1.0,
|
|
backgroundAlpha: 1.0,
|
|
visible: true
|
|
});
|
|
slider.foreground = Overlays.addOverlay("text", {
|
|
text: "",
|
|
backgroundColor: { red: 200, green: 200, blue: 200 },
|
|
x: slider.x, y: slider.y,
|
|
width: slider.pos * slider.w,
|
|
height: slider.h,
|
|
alpha: 1.0,
|
|
backgroundAlpha: 1.0,
|
|
visible: true
|
|
});
|
|
}
|
|
|
|
function onToolbarMove(newX, newY, deltaX, deltaY) {
|
|
Overlays.editOverlay(timer, {
|
|
x: newX + timerOffset - ToolBar.SPACING,
|
|
y: newY
|
|
});
|
|
|
|
slider.x = newX - ToolBar.SPACING;
|
|
slider.y = newY - slider.h - ToolBar.SPACING;
|
|
|
|
Overlays.editOverlay(slider.background, {
|
|
x: slider.x,
|
|
y: slider.y
|
|
});
|
|
Overlays.editOverlay(slider.foreground, {
|
|
x: slider.x,
|
|
y: slider.y
|
|
});
|
|
}
|
|
|
|
function updateTimer() {
|
|
var text = "";
|
|
if (Recording.isRecording()) {
|
|
text = formatTime(Recording.recorderElapsed());
|
|
} else {
|
|
text = formatTime(Recording.playerElapsed()) + " / " + formatTime(Recording.playerLength());
|
|
}
|
|
|
|
var timerWidth = text.length * 8 + ((Recording.isRecording()) ? 15 : 0);
|
|
|
|
Overlays.editOverlay(timer, {
|
|
text: text,
|
|
width: timerWidth
|
|
});
|
|
toolBar.changeSpacing(timerWidth + ToolBar.SPACING, spacing);
|
|
|
|
if (Recording.isRecording()) {
|
|
slider.pos = 1.0;
|
|
} else if (Recording.playerLength() > 0) {
|
|
slider.pos = Recording.playerElapsed() / Recording.playerLength();
|
|
}
|
|
|
|
Overlays.editOverlay(slider.foreground, {
|
|
width: slider.pos * slider.w
|
|
});
|
|
}
|
|
|
|
function formatTime(time) {
|
|
var MIN_PER_HOUR = 60;
|
|
var SEC_PER_MIN = 60;
|
|
var MSEC_DIGITS = 3;
|
|
|
|
var hours = Math.floor(time / (SEC_PER_MIN * MIN_PER_HOUR));
|
|
time -= hours * (SEC_PER_MIN * MIN_PER_HOUR);
|
|
|
|
var minutes = Math.floor(time / (SEC_PER_MIN));
|
|
time -= minutes * (SEC_PER_MIN);
|
|
|
|
var seconds = time;
|
|
|
|
var text = "";
|
|
text += (hours > 0) ? hours + ":" : "";
|
|
text += (minutes > 0) ? ((minutes < 10 && text !== "") ? "0" : "") + minutes + ":" : "";
|
|
text += ((seconds < 10 && text !== "") ? "0" : "") + seconds.toFixed(MSEC_DIGITS);
|
|
return text;
|
|
}
|
|
|
|
function moveUI() {
|
|
var relative = { x: 70, y: 40 };
|
|
toolBar.move(relative.x, windowDimensions.y - relative.y);
|
|
}
|
|
|
|
function mousePressEvent(event) {
|
|
var clickedOverlay = Overlays.getOverlayAtPoint({ x: event.x, y: event.y });
|
|
|
|
if (recordIcon === toolBar.clicked(clickedOverlay, false) && !Recording.isPlaying()) {
|
|
if (!Recording.isRecording()) {
|
|
Recording.startRecording();
|
|
toolBar.selectTool(recordIcon, false);
|
|
toolBar.setAlpha(ALPHA_OFF, playIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, playLoopIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, saveIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, loadIcon);
|
|
} else {
|
|
Recording.stopRecording();
|
|
toolBar.selectTool(recordIcon, true);
|
|
setDefaultPlayerOptions();
|
|
// Plays the recording at the same spot as you recorded it
|
|
Recording.setPlayFromCurrentLocation(false);
|
|
Recording.setPlayerTime(0);
|
|
Recording.loadLastRecording();
|
|
toolBar.setAlpha(ALPHA_ON, playIcon);
|
|
toolBar.setAlpha(ALPHA_ON, playLoopIcon);
|
|
toolBar.setAlpha(ALPHA_ON, saveIcon);
|
|
toolBar.setAlpha(ALPHA_ON, loadIcon);
|
|
}
|
|
} else if (playIcon === toolBar.clicked(clickedOverlay) && !Recording.isRecording()) {
|
|
if (Recording.isPlaying()) {
|
|
Recording.pausePlayer();
|
|
toolBar.setAlpha(ALPHA_ON, recordIcon);
|
|
toolBar.setAlpha(ALPHA_ON, saveIcon);
|
|
toolBar.setAlpha(ALPHA_ON, loadIcon);
|
|
} else if (Recording.playerLength() > 0) {
|
|
Recording.setPlayerLoop(false);
|
|
Recording.startPlaying();
|
|
toolBar.setAlpha(ALPHA_OFF, recordIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, saveIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, loadIcon);
|
|
watchStop = true;
|
|
}
|
|
} else if (playLoopIcon === toolBar.clicked(clickedOverlay) && !Recording.isRecording()) {
|
|
if (Recording.isPlaying()) {
|
|
Recording.pausePlayer();
|
|
toolBar.setAlpha(ALPHA_ON, recordIcon);
|
|
toolBar.setAlpha(ALPHA_ON, saveIcon);
|
|
toolBar.setAlpha(ALPHA_ON, loadIcon);
|
|
} else if (Recording.playerLength() > 0) {
|
|
Recording.setPlayerLoop(true);
|
|
Recording.startPlaying();
|
|
toolBar.setAlpha(ALPHA_OFF, recordIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, saveIcon);
|
|
toolBar.setAlpha(ALPHA_OFF, loadIcon);
|
|
}
|
|
} else if (saveIcon === toolBar.clicked(clickedOverlay)) {
|
|
if (!Recording.isRecording() && !Recording.isPlaying() && Recording.playerLength() !== 0) {
|
|
recordingFile = Window.save("Save recording to file", ".", "Recordings (*.hfr)");
|
|
if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) {
|
|
Recording.saveRecording(recordingFile);
|
|
}
|
|
}
|
|
} else if (loadIcon === toolBar.clicked(clickedOverlay)) {
|
|
if (!Recording.isRecording() && !Recording.isPlaying()) {
|
|
recordingFile = Window.browse("Load recording from file", ".", "Recordings (*.hfr *.rec *.HFR *.REC)");
|
|
if (!(recordingFile === "null" || recordingFile === null || recordingFile === "")) {
|
|
Recording.loadRecording(recordingFile, function(success) {
|
|
if (success) {
|
|
setDefaultPlayerOptions();
|
|
} else {
|
|
print("Failed to load recording from " + recordingFile);
|
|
}
|
|
});
|
|
}
|
|
if (Recording.playerLength() > 0) {
|
|
toolBar.setAlpha(ALPHA_ON, playIcon);
|
|
toolBar.setAlpha(ALPHA_ON, playLoopIcon);
|
|
toolBar.setAlpha(ALPHA_ON, saveIcon);
|
|
}
|
|
}
|
|
} else if (Recording.playerLength() > 0 &&
|
|
slider.x < event.x && event.x < slider.x + slider.w &&
|
|
slider.y < event.y && event.y < slider.y + slider.h) {
|
|
isSliding = true;
|
|
slider.pos = (event.x - slider.x) / slider.w;
|
|
Recording.setPlayerTime(slider.pos * Recording.playerLength());
|
|
}
|
|
}
|
|
var isSliding = false;
|
|
|
|
function mouseMoveEvent(event) {
|
|
if (isSliding) {
|
|
slider.pos = (event.x - slider.x) / slider.w;
|
|
if (slider.pos < 0.0 || slider.pos > 1.0) {
|
|
Recording.stopPlaying();
|
|
slider.pos = 0.0;
|
|
}
|
|
Recording.setPlayerTime(slider.pos * Recording.playerLength());
|
|
}
|
|
}
|
|
|
|
function mouseReleaseEvent(event) {
|
|
isSliding = false;
|
|
}
|
|
|
|
function update() {
|
|
var newDimensions = Controller.getViewportDimensions();
|
|
if (windowDimensions.x !== newDimensions.x || windowDimensions.y !== newDimensions.y) {
|
|
windowDimensions = newDimensions;
|
|
moveUI();
|
|
}
|
|
|
|
updateTimer();
|
|
|
|
if (watchStop && !Recording.isPlaying()) {
|
|
watchStop = false;
|
|
toolBar.setAlpha(ALPHA_ON, recordIcon);
|
|
toolBar.setAlpha(ALPHA_ON, saveIcon);
|
|
toolBar.setAlpha(ALPHA_ON, loadIcon);
|
|
}
|
|
}
|
|
|
|
function scriptEnding() {
|
|
if (Recording.isRecording()) {
|
|
Recording.stopRecording();
|
|
}
|
|
if (Recording.isPlaying()) {
|
|
Recording.stopPlaying();
|
|
}
|
|
toolBar.cleanup();
|
|
Overlays.deleteOverlay(timer);
|
|
Overlays.deleteOverlay(slider.background);
|
|
Overlays.deleteOverlay(slider.foreground);
|
|
}
|
|
|
|
Controller.mousePressEvent.connect(mousePressEvent);
|
|
Controller.mouseMoveEvent.connect(mouseMoveEvent);
|
|
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);
|
|
Script.update.connect(update);
|
|
Script.scriptEnding.connect(scriptEnding);
|
|
|
|
// Should be called last to put everything into position
|
|
moveUI();
|