diff --git a/record-and-playback/presentation/playback/presentation/acornmediaplayer/jquery.acornmediaplayer.js b/record-and-playback/presentation/playback/presentation/acornmediaplayer/jquery.acornmediaplayer.js
index 1b704312c19767ee2eb7eeec9ba3e7bd00b6974f..dc3db71311f3e82cef3bccd5eee429239e70293d 100755
--- a/record-and-playback/presentation/playback/presentation/acornmediaplayer/jquery.acornmediaplayer.js
+++ b/record-and-playback/presentation/playback/presentation/acornmediaplayer/jquery.acornmediaplayer.js
@@ -11,7 +11,7 @@
* contact@ghinda.net
*
*/
-
+
(function($) {
$.fn.acornMediaPlayer = function(options) {
/*
@@ -85,6 +85,8 @@
unmute: 'Unmute',
fullscreen: 'Fullscreen',
fullscreenTitle: 'Toggle fullscreen mode',
+ swap: 'Swap',
+ swapTitle: 'Toggle video and presention swap',
volumeTitle: 'Volume control',
seekTitle: 'Video seek control',
captions: 'Captions',
@@ -122,6 +124,13 @@
*/
var fullscreenBtnMarkup = (acorn.$self.is('video')) ? '<button class="acorn-fullscreen-button" title="' + text.fullscreenTitle + '" aria-controls="' + acorn.id + '">' + text.fullscreen + '</button>' : '';
+ /*
+ * Markup for the swap button
+ * If the element is not <video> we leave if blank, as the button if useless on <audio> elements
+ */
+ var swapBtnMarkup = (acorn.$self.is('video')) ? '<button class="acorn-swap-button" title="' + text.swapTitle + '" aria-controls="' + acorn.id + '">' + text.swap + '</button>' : '';
+
+
/*
* Complete markup
*/
@@ -133,6 +142,7 @@
'<button class="acorn-volume-button" title="' + text.mute + '" aria-controls="' + acorn.id + '">' + text.mute + '</button>' +
'<input type="range" class="acorn-volume-slider" title="' + text.volumeTitle + '" value="1" min="0" max="1" step="0.05" aria-controls="' + acorn.id + '"/>' +
'</div>' +
+ swapBtnMarkup +
fullscreenBtnMarkup +
'<button class="acorn-caption-button" title="' + text.captionsTitle + '" aria-controls="' + acorn.id + '">' + text.captions + '</button>' +
'<div class="acorn-caption-selector"></div>' +
@@ -172,7 +182,7 @@
acorn.$volume = $('.acorn-volume-slider', acorn.$container);
acorn.$volumeBtn = $('.acorn-volume-button', acorn.$container);
acorn.$fullscreenBtn = $('.acorn-fullscreen-button', acorn.$container);
-
+ acorn.$swapBtn = $('.acorn-swap-button', acorn.$container);
/*
* Append the markup for the Captions and Transcript
* and define newly created DOM nodes for these
@@ -639,6 +649,98 @@
}
};
+ /*
+ * Swap the video and presentation areas
+ *
+ * Resizes and moves based on hard coded numbers
+ * Uses css to move it
+ */
+
+ var swapped = false;
+
+ var goSwap = function() {
+ if (swapped === false) {
+ $('#slide').css("width", "400px");
+ $('#slide').css("height", "300px");
+ $('#slide > object').attr("width", "400px");
+ $('#slide > object').attr("height", "300px");
+ var svgfile = $('#slide > object')[0].contentDocument.getElementById("svgfile");
+ svgfile.style.width = "400px";
+ svgfile.style.height = "300px";
+
+ var slide = document.getElementById("slide");
+ var cursor = document.getElementById("cursor");
+ var slideT = document.getElementById("slideText");
+ var video = document.getElementById("video");
+
+ video.style.width = "800px";
+ video.style.height = "600px";
+
+ $('#videoRecordingWrapper').position({
+ "my": "left top",
+ "at": "right top",
+ "of": '#thumbnails',
+ "collision": "none none",
+ "offset": "10 0"
+ });
+
+ $('#presentation').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#chat',
+ "collision": "none none"
+ });
+
+ $('.acorn-controls').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#playbackArea',
+ "collision": "none none"
+ });
+
+ draw(0,0);
+
+ swapped = true;
+ } else {
+ $('#slide').css("width", "800px");
+ $('#slide').css("height", "600px");
+ $('#slide > object').attr("width", "800px");
+ $('#slide > object').attr("height", "600px");
+ var svgfile = $('#slide > object')[0].contentDocument.getElementById("svgfile");
+ svgfile.style.width = "800px";
+ svgfile.style.height = "600px";
+
+ var video = document.getElementById("video");
+
+ video.style.width = "400px";
+ video.style.height = "300px";
+
+ $('#presentation').position({
+ "my": "left top",
+ "at": "right top",
+ "of": '#thumbnails',
+ "collision": "none none",
+ "offset": "10 0"
+ });
+
+ $('#videoRecordingWrapper').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#chat',
+ "collision": "none none"
+ });
+
+ $('.acorn-controls').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#playbackArea',
+ "collision": "none none"
+ });
+
+ swapped = false;
+ }
+ }
+
/*
* CAPTIONS Behaviour
*
@@ -909,6 +1011,9 @@
// bind Fullscreen Button
acorn.$fullscreenBtn.click(goFullscreen);
+ // bind Swap Button
+ acorn.$swapBtn.click(goSwap);
+
// initialize volume controls
initVolume();
diff --git a/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/acorn.darkglass.css b/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/acorn.darkglass.css
index 1472ca7cc516f63110eaa8d134180ab2193289c2..be72a168f9e83fb924dfc3e284741285f527426e 100755
--- a/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/acorn.darkglass.css
+++ b/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/acorn.darkglass.css
@@ -247,6 +247,11 @@
.acorn-player.darkglass .acorn-volume-mute {
background-image: url(darkglass-volume.png);
}
+/* Swap Button */
+.acorn-player.darkglass .acorn-swap-button {
+ float: right;
+ background-image: url(darkglass-swap.png);
+}
/* Fullscreen Button */
.acorn-player.darkglass .acorn-fullscreen-button {
float: right;
diff --git a/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/darkglass-swap.png b/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/darkglass-swap.png
new file mode 100755
index 0000000000000000000000000000000000000000..055dacceac1cc04d28cdd69f4dd2995fe6ebeaa0
Binary files /dev/null and b/record-and-playback/presentation/playback/presentation/acornmediaplayer/themes/darkglass/darkglass-swap.png differ
diff --git a/record-and-playback/presentation/playback/presentation/lib/writing.js b/record-and-playback/presentation/playback/presentation/lib/writing.js
index 0a53f491b9d10b2cf4fe9c43b9ddded6a20d613d..fcd8e5f09d0b16cfc962028de67ccf9a4446b7eb 100755
--- a/record-and-playback/presentation/playback/presentation/lib/writing.js
+++ b/record-and-playback/presentation/playback/presentation/lib/writing.js
@@ -34,9 +34,14 @@ function getUrlParameters() {
// Draw the cursor at a specific point
function draw(x, y) {
cursorStyle = document.getElementById("cursor").style;
+ var slide = document.getElementById("slide");
+ var obj = $("#slide > object");
+ var scaledX = parseInt(x, 10) * (parseInt(obj.attr("width"), 10) / 800);
+ var scaledY = parseInt(y, 10) * (parseInt(obj.attr("height"), 10) / 600);
+
//move to the next place
- var leftValue = parseInt(document.getElementById("slide").offsetLeft, 10) + parseInt(x, 10)
- var topValue = parseInt(document.getElementById("slide").offsetTop, 10) + parseInt(y, 10)
+ var leftValue = parseInt(slide.offsetLeft, 10) + parseInt(scaledX, 10)
+ var topValue = parseInt(slide.offsetTop, 10) + parseInt(scaledY, 10)
if (leftValue < 0){
leftValue = 0
}
diff --git a/record-and-playback/presentation/playback/presentation/playback.html b/record-and-playback/presentation/playback/presentation/playback.html
index 16782727e0aa26782ae75f02afd22a626e597f43..b48d18261c39432c5828117cf262699c85518514 100755
--- a/record-and-playback/presentation/playback/presentation/playback.html
+++ b/record-and-playback/presentation/playback/presentation/playback.html
@@ -69,6 +69,7 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
</div>
</div>
</div>
+
<!--
<div id="accInfo">
<input id="accEnabled" type="checkbox" value="accEnabled" />
diff --git a/record-and-playback/presentation/playback/presentation/playback.js b/record-and-playback/presentation/playback/presentation/playback.js
old mode 100644
new mode 100755
index cfb9ffd7ca7a97f6fcf7971bdf7f377f2147d958..2de023b211abc03b9739cc98212a05bba094e088
--- a/record-and-playback/presentation/playback/presentation/playback.js
+++ b/record-and-playback/presentation/playback/presentation/playback.js
@@ -313,7 +313,8 @@ document.addEventListener( "DOMContentLoaded", function() {
$('.acorn-controls').position({
"my": "center top",
"at": "center bottom",
- "of": '#playbackArea'
+ "of": '#playbackArea',
+ "collision": "fit fit"
});
}, false);
@@ -339,3 +340,88 @@ function Tick() {
$('#countdown').html(secondsToWait);
window.setTimeout("Tick()", 1000);
}
+
+var swapped = false;
+
+function swapVideoPres() {
+ if (swapped === false) {
+ $('#slide').css("width", "400px");
+ $('#slide').css("height", "300px");
+ $('#slide > object').attr("width", "400px");
+ $('#slide > object').attr("height", "300px");
+ var svgfile = $('#slide > object')[0].contentDocument.getElementById("svgfile");
+ svgfile.style.width = "400px";
+ svgfile.style.height = "300px";
+
+ var slide = document.getElementById("slide");
+ var cursor = document.getElementById("cursor");
+ var slideT = document.getElementById("slideText");
+ var video = document.getElementById("video");
+
+ video.style.width = "800px";
+ video.style.height = "600px";
+
+ $('#videoRecordingWrapper').position({
+ "my": "left top",
+ "at": "right top",
+ "of": '#thumbnails',
+ "collision": "none none",
+ "offset": "10 0"
+ });
+
+ $('#presentation').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#chat',
+ "collision": "none none"
+ });
+
+ $('.acorn-controls').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#playbackArea',
+ "collision": "none none"
+ });
+
+ draw(0,0);
+
+ swapped = true;
+ } else {
+ $('#slide').css("width", "800px");
+ $('#slide').css("height", "600px");
+ $('#slide > object').attr("width", "800px");
+ $('#slide > object').attr("height", "600px");
+ var svgfile = $('#slide > object')[0].contentDocument.getElementById("svgfile");
+ svgfile.style.width = "800px";
+ svgfile.style.height = "600px";
+
+ var video = document.getElementById("video");
+
+ video.style.width = "400px";
+ video.style.height = "300px";
+
+ $('#presentation').position({
+ "my": "left top",
+ "at": "right top",
+ "of": '#thumbnails',
+ "collision": "none none",
+ "offset": "10 0"
+ });
+
+ $('#videoRecordingWrapper').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#chat',
+ "collision": "none none"
+ });
+
+ $('.acorn-controls').position({
+ "my": "center top",
+ "at": "center bottom",
+ "of": '#playbackArea',
+ "collision": "none none"
+ });
+
+ swapped = false;
+ }
+}