update presentation_export playback to be responsive as the playback format
This commit is contained in:
Felipe Cecagno
parent
83d6f37f06
commit
c5917f6a92
@ -675,99 +675,8 @@
|
||||
* 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"
|
||||
});
|
||||
$('#videoRecordingWrapper').width("800px");
|
||||
$('#videoRecordingWrapper').height("600px");
|
||||
|
||||
$('#presentation').position({
|
||||
"my": "left top",
|
||||
"at": "left bottom",
|
||||
"of": '#chat',
|
||||
"collision": "none none"
|
||||
});
|
||||
$('#presentation').width("400px");
|
||||
$('#presentation').height("300px");
|
||||
|
||||
$('.acorn-controls').position({
|
||||
"my": "left top",
|
||||
"at": "left bottom",
|
||||
"of": '#videoRecordingWrapper',
|
||||
"collision": "none none",
|
||||
"offset": "10 7"
|
||||
});
|
||||
|
||||
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"
|
||||
});
|
||||
$('#presentation').width("800px");
|
||||
$('#presentation').height("600px");
|
||||
|
||||
$('#videoRecordingWrapper').position({
|
||||
"my": "left top",
|
||||
"at": "left bottom",
|
||||
"of": '#chat',
|
||||
"collision": "none none"
|
||||
});
|
||||
$('#videoRecordingWrapper').width("400px");
|
||||
$('#videoRecordingWrapper').height("300px");
|
||||
|
||||
$('.acorn-controls').position({
|
||||
"my": "left top",
|
||||
"at": "left bottom",
|
||||
"of": '#presentation',
|
||||
"collision": "none none",
|
||||
"offset": "10 7"
|
||||
});
|
||||
|
||||
swapped = false;
|
||||
}
|
||||
acorn.$self.trigger('swap');
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
@ -0,0 +1,337 @@
|
||||
/*
|
||||
* bigbluebutton - Theme for Acorn Media Player
|
||||
* bigbluebuttonsmall - Child theme of bigbluebutton
|
||||
*
|
||||
* To be used with the vertical volume slider.
|
||||
*
|
||||
* Copyright (C) 2010 Cristian I. Colceriu
|
||||
*
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* www.ghinda.net
|
||||
* contact@ghinda.net
|
||||
*
|
||||
*/
|
||||
|
||||
/* Start of bigbluebutton theme */
|
||||
.acorn-player.bigbluebutton {
|
||||
float: left;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
/* <video> element */
|
||||
.acorn-player.bigbluebutton video {
|
||||
float: left;
|
||||
clear: both;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* Player Controls */
|
||||
.acorn-player.bigbluebutton .acorn-controls {
|
||||
position: relative;
|
||||
float: left;
|
||||
clear: both;
|
||||
width: 95%;
|
||||
padding: 5px 40px 5px 5px;
|
||||
border: 0;
|
||||
background: #2a2d34; /* #314b5d; */
|
||||
}
|
||||
/* <button>s */
|
||||
.acorn-player.bigbluebutton button {
|
||||
position: relative;
|
||||
width: 35px;
|
||||
margin: 0 6px;
|
||||
padding: 0px;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: auto 100%;
|
||||
|
||||
opacity: 0.6;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
transition: all 0.2s ease-in-out;
|
||||
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
cursor: pointer;
|
||||
text-indent: -9999px;
|
||||
}
|
||||
.acorn-player.bigbluebutton button:hover, .acorn-player.bigbluebutton button:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
.acorn-player.bigbluebutton button:active {
|
||||
top: 1px;
|
||||
}
|
||||
/* Playback controls(Play, Pause) */
|
||||
.acorn-player.bigbluebutton .acorn-play-button {
|
||||
float: left;
|
||||
display: block;
|
||||
background-image: url(bigbluebutton-play.png);
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-paused-button {
|
||||
background-image: url(bigbluebutton-pause.png);
|
||||
}
|
||||
/* Seek Slider */
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
width: 70%;
|
||||
height: 12px;
|
||||
margin: 5px 10px 5px 10px;
|
||||
background: #8E9DAF;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider .ui-slider-handle {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 16px;
|
||||
border-left: 1px solid #333;
|
||||
border-right: 1px solid #333;
|
||||
top: -2px;
|
||||
background: #e6e6e6;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider .ui-slider-handle:hover {
|
||||
/* height: 18px; */
|
||||
/* top: -4px; */
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider .ui-slider-range {
|
||||
background: #289ad6;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-buffer {
|
||||
background: #8E9DAF !important;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider .ui-state-focus, .acorn-player.bigbluebutton .acorn-seek-slider .ui-slider-handle.ui-state-hover {
|
||||
background: #fff !important;
|
||||
|
||||
-moz-box-shadow: 0px 2px 15px #289ad6;
|
||||
-webkit-box-shadow: 0px 2px 15px #289ad6;
|
||||
box-shadow: 0px 2px 15px #289ad6;
|
||||
}
|
||||
/* Timer */
|
||||
.acorn-player.bigbluebutton .acorn-timer {
|
||||
float: left;
|
||||
width: 6%;
|
||||
overflow: hidden;
|
||||
margin-top: 1px;
|
||||
color: #eee;
|
||||
font-size: 0.9em;
|
||||
font-weight: bold;
|
||||
min-width: 40px;
|
||||
}
|
||||
/* Volume Box */
|
||||
.acorn-player.bigbluebutton .acorn-volume-box {
|
||||
position: absolute;
|
||||
float: left;
|
||||
bottom: 6px;
|
||||
right: 0;
|
||||
overflow: visible;
|
||||
color: #fff;
|
||||
transition: all 0.1s ease-in-out 0s;
|
||||
margin: 0 6px;
|
||||
width: 35px;/* 5%; */
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-box:hover {
|
||||
height: 135px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-slider.handle-focused {
|
||||
position: relative;
|
||||
visibility: visible;
|
||||
height: 100px;
|
||||
opacity: 1;
|
||||
top: -100px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-box:hover .acorn-volume-slider {
|
||||
position: relative;
|
||||
visibility: visible;
|
||||
height: 100px;
|
||||
opacity: 1;
|
||||
top: 0px;
|
||||
}
|
||||
/* Volume Slider */
|
||||
.acorn-player.bigbluebutton .acorn-volume-slider {
|
||||
position: relative;
|
||||
height: 1px;
|
||||
width: 12px;
|
||||
margin: 0 auto;
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
border: 1px solid #666;
|
||||
background: #ddd; /* #8E9DAF; */
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-slider .ui-slider-handle {
|
||||
width: 18px;
|
||||
height: 8px;
|
||||
left: -4px;
|
||||
margin-bottom:-0.6em;
|
||||
margin-left:0;
|
||||
border: 1px solid #666;
|
||||
border-radius: 3px;
|
||||
background: #e6e6e6;
|
||||
|
||||
-moz-transition: all 0.1s ease-in-out;
|
||||
-webkit-transition: all 0.1s ease-in-out;
|
||||
-o-transition: all 0.1s ease-in-out;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-slider .ui-slider-handle:hover, .acorn-player.bigbluebutton .acorn-volume-slider.handle-focused .ui-slider-handle {
|
||||
background: #fff;
|
||||
|
||||
-moz-box-shadow: 0px 2px 15px #289ad6;
|
||||
-webkit-box-shadow: 0px 2px 15px #289ad6;
|
||||
box-shadow: 0px 2px 15px #289ad6;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-slider .ui-slider-range {
|
||||
background: #289ad6;
|
||||
box-shadow: inset 0 3px 3px #d5d5d5;
|
||||
margin-top: 15px;
|
||||
}
|
||||
/* Volume Button */
|
||||
.acorn-player.bigbluebutton .acorn-volume-button {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
background: url(bigbluebutton-volume-full.png) no-repeat;
|
||||
background-size: contain;
|
||||
text-indent: -9999px;
|
||||
margin: 0;
|
||||
opacity: 0.6;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-button:active {
|
||||
top: auto;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-mute {
|
||||
background-image: url(bigbluebutton-volume.png);
|
||||
}
|
||||
/* Swap Button */
|
||||
.acorn-player.bigbluebutton .acorn-swap-button {
|
||||
float: right;
|
||||
background-image: url(bigbluebutton-swap.png);
|
||||
}
|
||||
/* Fullscreen Button */
|
||||
.acorn-player.bigbluebutton .acorn-fullscreen-button {
|
||||
float: right;
|
||||
background-image: url(bigbluebutton-fullscreen.png);
|
||||
}
|
||||
/* Fullscreen Mode */
|
||||
.acorn-player.bigbluebutton .fullscreen-controls {
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .fullscreen-controls button {
|
||||
height: 35px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .fullscreen-controls .acorn-fullscreen-button {
|
||||
background-image: url(bigbluebutton-exit-fullscreen.png);
|
||||
}
|
||||
.acorn-player.bigbluebutton .fullscreen-controls .acorn-seek-slider {
|
||||
margin-top: 10px;
|
||||
}
|
||||
/* Caption Button */
|
||||
.acorn-player.bigbluebutton .acorn-caption-button {
|
||||
float: right;
|
||||
background-image: url(bigbluebutton-caption.png);
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-caption {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
|
||||
text-shadow: 0px 1px 5px #000;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-caption-active {
|
||||
background-color: #8F0000 !important;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-transcript-active {
|
||||
background-color: #8F0000 !important;
|
||||
}
|
||||
/* Transcript Button */
|
||||
.acorn-player.bigbluebutton .acorn-transcript-button {
|
||||
float: right;
|
||||
background-image: url(bigbluebutton-transcript.png);
|
||||
}
|
||||
|
||||
.acorn-player .loading-media {
|
||||
left: auto;
|
||||
right: auto;
|
||||
top: auto;
|
||||
bottom: auto;
|
||||
margin: 0 auto;
|
||||
background: none;
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
margin-top: 6px;
|
||||
}
|
||||
/* Controls overlay while loading */
|
||||
.show-loading .acorn-controls:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px; /* Slider handle goes above */
|
||||
left: 0;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #2a2d34;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
/* Very small screens only */
|
||||
@media only screen and (max-width: 21em) {
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider {
|
||||
width: 20%;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-controls {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.acorn-player.bigbluebutton button {
|
||||
width: 25px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-box {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small screens only */
|
||||
@media only screen and (min-width: 21.063em) {
|
||||
/* @media only screen and (max-width: 40em) { -- this is used by foundation */
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider {
|
||||
width: 40%;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-controls {
|
||||
padding-right: 35px;
|
||||
}
|
||||
.acorn-player.bigbluebutton button {
|
||||
position: relative;
|
||||
width: 25px;
|
||||
}
|
||||
.acorn-player.bigbluebutton .acorn-volume-box {
|
||||
width: 25px;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens up */
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens up */
|
||||
@media only screen and (min-width: 64.063em) {
|
||||
.acorn-player.bigbluebutton .acorn-seek-slider {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 432 B |
Binary file not shown.
|
After Width: | Height: | Size: 513 B |
Binary file not shown.
|
After Width: | Height: | Size: 500 B |
Binary file not shown.
|
After Width: | Height: | Size: 241 B |
Binary file not shown.
|
After Width: | Height: | Size: 371 B |
Binary file not shown.
|
After Width: | Height: | Size: 616 B |
Binary file not shown.
|
After Width: | Height: | Size: 388 B |
Binary file not shown.
|
After Width: | Height: | Size: 447 B |
Binary file not shown.
|
After Width: | Height: | Size: 401 B |
@ -0,0 +1,594 @@
|
||||
/*
|
||||
* Foundation Icons v 3.0
|
||||
* Made by ZURB 2013 http://zurb.com/playground/foundation-icon-fonts-3
|
||||
* MIT License
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: "foundation-icons";
|
||||
src: url("foundation-icons.eot");
|
||||
src: url("foundation-icons.eot?#iefix") format("embedded-opentype"),
|
||||
url("foundation-icons.woff") format("woff"),
|
||||
url("foundation-icons.ttf") format("truetype"),
|
||||
url("foundation-icons.svg#fontcustom") format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.fi-address-book:before,
|
||||
.fi-alert:before,
|
||||
.fi-align-center:before,
|
||||
.fi-align-justify:before,
|
||||
.fi-align-left:before,
|
||||
.fi-align-right:before,
|
||||
.fi-anchor:before,
|
||||
.fi-annotate:before,
|
||||
.fi-archive:before,
|
||||
.fi-arrow-down:before,
|
||||
.fi-arrow-left:before,
|
||||
.fi-arrow-right:before,
|
||||
.fi-arrow-up:before,
|
||||
.fi-arrows-compress:before,
|
||||
.fi-arrows-expand:before,
|
||||
.fi-arrows-in:before,
|
||||
.fi-arrows-out:before,
|
||||
.fi-asl:before,
|
||||
.fi-asterisk:before,
|
||||
.fi-at-sign:before,
|
||||
.fi-background-color:before,
|
||||
.fi-battery-empty:before,
|
||||
.fi-battery-full:before,
|
||||
.fi-battery-half:before,
|
||||
.fi-bitcoin-circle:before,
|
||||
.fi-bitcoin:before,
|
||||
.fi-blind:before,
|
||||
.fi-bluetooth:before,
|
||||
.fi-bold:before,
|
||||
.fi-book-bookmark:before,
|
||||
.fi-book:before,
|
||||
.fi-bookmark:before,
|
||||
.fi-braille:before,
|
||||
.fi-burst-new:before,
|
||||
.fi-burst-sale:before,
|
||||
.fi-burst:before,
|
||||
.fi-calendar:before,
|
||||
.fi-camera:before,
|
||||
.fi-check:before,
|
||||
.fi-checkbox:before,
|
||||
.fi-clipboard-notes:before,
|
||||
.fi-clipboard-pencil:before,
|
||||
.fi-clipboard:before,
|
||||
.fi-clock:before,
|
||||
.fi-closed-caption:before,
|
||||
.fi-cloud:before,
|
||||
.fi-comment-minus:before,
|
||||
.fi-comment-quotes:before,
|
||||
.fi-comment-video:before,
|
||||
.fi-comment:before,
|
||||
.fi-comments:before,
|
||||
.fi-compass:before,
|
||||
.fi-contrast:before,
|
||||
.fi-credit-card:before,
|
||||
.fi-crop:before,
|
||||
.fi-crown:before,
|
||||
.fi-css3:before,
|
||||
.fi-database:before,
|
||||
.fi-die-five:before,
|
||||
.fi-die-four:before,
|
||||
.fi-die-one:before,
|
||||
.fi-die-six:before,
|
||||
.fi-die-three:before,
|
||||
.fi-die-two:before,
|
||||
.fi-dislike:before,
|
||||
.fi-dollar-bill:before,
|
||||
.fi-dollar:before,
|
||||
.fi-download:before,
|
||||
.fi-eject:before,
|
||||
.fi-elevator:before,
|
||||
.fi-euro:before,
|
||||
.fi-eye:before,
|
||||
.fi-fast-forward:before,
|
||||
.fi-female-symbol:before,
|
||||
.fi-female:before,
|
||||
.fi-filter:before,
|
||||
.fi-first-aid:before,
|
||||
.fi-flag:before,
|
||||
.fi-folder-add:before,
|
||||
.fi-folder-lock:before,
|
||||
.fi-folder:before,
|
||||
.fi-foot:before,
|
||||
.fi-foundation:before,
|
||||
.fi-graph-bar:before,
|
||||
.fi-graph-horizontal:before,
|
||||
.fi-graph-pie:before,
|
||||
.fi-graph-trend:before,
|
||||
.fi-guide-dog:before,
|
||||
.fi-hearing-aid:before,
|
||||
.fi-heart:before,
|
||||
.fi-home:before,
|
||||
.fi-html5:before,
|
||||
.fi-indent-less:before,
|
||||
.fi-indent-more:before,
|
||||
.fi-info:before,
|
||||
.fi-italic:before,
|
||||
.fi-key:before,
|
||||
.fi-laptop:before,
|
||||
.fi-layout:before,
|
||||
.fi-lightbulb:before,
|
||||
.fi-like:before,
|
||||
.fi-link:before,
|
||||
.fi-list-bullet:before,
|
||||
.fi-list-number:before,
|
||||
.fi-list-thumbnails:before,
|
||||
.fi-list:before,
|
||||
.fi-lock:before,
|
||||
.fi-loop:before,
|
||||
.fi-magnifying-glass:before,
|
||||
.fi-mail:before,
|
||||
.fi-male-female:before,
|
||||
.fi-male-symbol:before,
|
||||
.fi-male:before,
|
||||
.fi-map:before,
|
||||
.fi-marker:before,
|
||||
.fi-megaphone:before,
|
||||
.fi-microphone:before,
|
||||
.fi-minus-circle:before,
|
||||
.fi-minus:before,
|
||||
.fi-mobile-signal:before,
|
||||
.fi-mobile:before,
|
||||
.fi-monitor:before,
|
||||
.fi-mountains:before,
|
||||
.fi-music:before,
|
||||
.fi-next:before,
|
||||
.fi-no-dogs:before,
|
||||
.fi-no-smoking:before,
|
||||
.fi-page-add:before,
|
||||
.fi-page-copy:before,
|
||||
.fi-page-csv:before,
|
||||
.fi-page-delete:before,
|
||||
.fi-page-doc:before,
|
||||
.fi-page-edit:before,
|
||||
.fi-page-export-csv:before,
|
||||
.fi-page-export-doc:before,
|
||||
.fi-page-export-pdf:before,
|
||||
.fi-page-export:before,
|
||||
.fi-page-filled:before,
|
||||
.fi-page-multiple:before,
|
||||
.fi-page-pdf:before,
|
||||
.fi-page-remove:before,
|
||||
.fi-page-search:before,
|
||||
.fi-page:before,
|
||||
.fi-paint-bucket:before,
|
||||
.fi-paperclip:before,
|
||||
.fi-pause:before,
|
||||
.fi-paw:before,
|
||||
.fi-paypal:before,
|
||||
.fi-pencil:before,
|
||||
.fi-photo:before,
|
||||
.fi-play-circle:before,
|
||||
.fi-play-video:before,
|
||||
.fi-play:before,
|
||||
.fi-plus:before,
|
||||
.fi-pound:before,
|
||||
.fi-power:before,
|
||||
.fi-previous:before,
|
||||
.fi-price-tag:before,
|
||||
.fi-pricetag-multiple:before,
|
||||
.fi-print:before,
|
||||
.fi-prohibited:before,
|
||||
.fi-projection-screen:before,
|
||||
.fi-puzzle:before,
|
||||
.fi-quote:before,
|
||||
.fi-record:before,
|
||||
.fi-refresh:before,
|
||||
.fi-results-demographics:before,
|
||||
.fi-results:before,
|
||||
.fi-rewind-ten:before,
|
||||
.fi-rewind:before,
|
||||
.fi-rss:before,
|
||||
.fi-safety-cone:before,
|
||||
.fi-save:before,
|
||||
.fi-share:before,
|
||||
.fi-sheriff-badge:before,
|
||||
.fi-shield:before,
|
||||
.fi-shopping-bag:before,
|
||||
.fi-shopping-cart:before,
|
||||
.fi-shuffle:before,
|
||||
.fi-skull:before,
|
||||
.fi-social-500px:before,
|
||||
.fi-social-adobe:before,
|
||||
.fi-social-amazon:before,
|
||||
.fi-social-android:before,
|
||||
.fi-social-apple:before,
|
||||
.fi-social-behance:before,
|
||||
.fi-social-bing:before,
|
||||
.fi-social-blogger:before,
|
||||
.fi-social-delicious:before,
|
||||
.fi-social-designer-news:before,
|
||||
.fi-social-deviant-art:before,
|
||||
.fi-social-digg:before,
|
||||
.fi-social-dribbble:before,
|
||||
.fi-social-drive:before,
|
||||
.fi-social-dropbox:before,
|
||||
.fi-social-evernote:before,
|
||||
.fi-social-facebook:before,
|
||||
.fi-social-flickr:before,
|
||||
.fi-social-forrst:before,
|
||||
.fi-social-foursquare:before,
|
||||
.fi-social-game-center:before,
|
||||
.fi-social-github:before,
|
||||
.fi-social-google-plus:before,
|
||||
.fi-social-hacker-news:before,
|
||||
.fi-social-hi5:before,
|
||||
.fi-social-instagram:before,
|
||||
.fi-social-joomla:before,
|
||||
.fi-social-lastfm:before,
|
||||
.fi-social-linkedin:before,
|
||||
.fi-social-medium:before,
|
||||
.fi-social-myspace:before,
|
||||
.fi-social-orkut:before,
|
||||
.fi-social-path:before,
|
||||
.fi-social-picasa:before,
|
||||
.fi-social-pinterest:before,
|
||||
.fi-social-rdio:before,
|
||||
.fi-social-reddit:before,
|
||||
.fi-social-skillshare:before,
|
||||
.fi-social-skype:before,
|
||||
.fi-social-smashing-mag:before,
|
||||
.fi-social-snapchat:before,
|
||||
.fi-social-spotify:before,
|
||||
.fi-social-squidoo:before,
|
||||
.fi-social-stack-overflow:before,
|
||||
.fi-social-steam:before,
|
||||
.fi-social-stumbleupon:before,
|
||||
.fi-social-treehouse:before,
|
||||
.fi-social-tumblr:before,
|
||||
.fi-social-twitter:before,
|
||||
.fi-social-vimeo:before,
|
||||
.fi-social-windows:before,
|
||||
.fi-social-xbox:before,
|
||||
.fi-social-yahoo:before,
|
||||
.fi-social-yelp:before,
|
||||
.fi-social-youtube:before,
|
||||
.fi-social-zerply:before,
|
||||
.fi-social-zurb:before,
|
||||
.fi-sound:before,
|
||||
.fi-star:before,
|
||||
.fi-stop:before,
|
||||
.fi-strikethrough:before,
|
||||
.fi-subscript:before,
|
||||
.fi-superscript:before,
|
||||
.fi-tablet-landscape:before,
|
||||
.fi-tablet-portrait:before,
|
||||
.fi-target-two:before,
|
||||
.fi-target:before,
|
||||
.fi-telephone-accessible:before,
|
||||
.fi-telephone:before,
|
||||
.fi-text-color:before,
|
||||
.fi-thumbnails:before,
|
||||
.fi-ticket:before,
|
||||
.fi-torso-business:before,
|
||||
.fi-torso-female:before,
|
||||
.fi-torso:before,
|
||||
.fi-torsos-all-female:before,
|
||||
.fi-torsos-all:before,
|
||||
.fi-torsos-female-male:before,
|
||||
.fi-torsos-male-female:before,
|
||||
.fi-torsos:before,
|
||||
.fi-trash:before,
|
||||
.fi-trees:before,
|
||||
.fi-trophy:before,
|
||||
.fi-underline:before,
|
||||
.fi-universal-access:before,
|
||||
.fi-unlink:before,
|
||||
.fi-unlock:before,
|
||||
.fi-upload-cloud:before,
|
||||
.fi-upload:before,
|
||||
.fi-usb:before,
|
||||
.fi-video:before,
|
||||
.fi-volume-none:before,
|
||||
.fi-volume-strike:before,
|
||||
.fi-volume:before,
|
||||
.fi-web:before,
|
||||
.fi-wheelchair:before,
|
||||
.fi-widget:before,
|
||||
.fi-wrench:before,
|
||||
.fi-x-circle:before,
|
||||
.fi-x:before,
|
||||
.fi-yen:before,
|
||||
.fi-zoom-in:before,
|
||||
.fi-zoom-out:before {
|
||||
font-family: "foundation-icons";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
.fi-address-book:before { content: "\f100"; }
|
||||
.fi-alert:before { content: "\f101"; }
|
||||
.fi-align-center:before { content: "\f102"; }
|
||||
.fi-align-justify:before { content: "\f103"; }
|
||||
.fi-align-left:before { content: "\f104"; }
|
||||
.fi-align-right:before { content: "\f105"; }
|
||||
.fi-anchor:before { content: "\f106"; }
|
||||
.fi-annotate:before { content: "\f107"; }
|
||||
.fi-archive:before { content: "\f108"; }
|
||||
.fi-arrow-down:before { content: "\f109"; }
|
||||
.fi-arrow-left:before { content: "\f10a"; }
|
||||
.fi-arrow-right:before { content: "\f10b"; }
|
||||
.fi-arrow-up:before { content: "\f10c"; }
|
||||
.fi-arrows-compress:before { content: "\f10d"; }
|
||||
.fi-arrows-expand:before { content: "\f10e"; }
|
||||
.fi-arrows-in:before { content: "\f10f"; }
|
||||
.fi-arrows-out:before { content: "\f110"; }
|
||||
.fi-asl:before { content: "\f111"; }
|
||||
.fi-asterisk:before { content: "\f112"; }
|
||||
.fi-at-sign:before { content: "\f113"; }
|
||||
.fi-background-color:before { content: "\f114"; }
|
||||
.fi-battery-empty:before { content: "\f115"; }
|
||||
.fi-battery-full:before { content: "\f116"; }
|
||||
.fi-battery-half:before { content: "\f117"; }
|
||||
.fi-bitcoin-circle:before { content: "\f118"; }
|
||||
.fi-bitcoin:before { content: "\f119"; }
|
||||
.fi-blind:before { content: "\f11a"; }
|
||||
.fi-bluetooth:before { content: "\f11b"; }
|
||||
.fi-bold:before { content: "\f11c"; }
|
||||
.fi-book-bookmark:before { content: "\f11d"; }
|
||||
.fi-book:before { content: "\f11e"; }
|
||||
.fi-bookmark:before { content: "\f11f"; }
|
||||
.fi-braille:before { content: "\f120"; }
|
||||
.fi-burst-new:before { content: "\f121"; }
|
||||
.fi-burst-sale:before { content: "\f122"; }
|
||||
.fi-burst:before { content: "\f123"; }
|
||||
.fi-calendar:before { content: "\f124"; }
|
||||
.fi-camera:before { content: "\f125"; }
|
||||
.fi-check:before { content: "\f126"; }
|
||||
.fi-checkbox:before { content: "\f127"; }
|
||||
.fi-clipboard-notes:before { content: "\f128"; }
|
||||
.fi-clipboard-pencil:before { content: "\f129"; }
|
||||
.fi-clipboard:before { content: "\f12a"; }
|
||||
.fi-clock:before { content: "\f12b"; }
|
||||
.fi-closed-caption:before { content: "\f12c"; }
|
||||
.fi-cloud:before { content: "\f12d"; }
|
||||
.fi-comment-minus:before { content: "\f12e"; }
|
||||
.fi-comment-quotes:before { content: "\f12f"; }
|
||||
.fi-comment-video:before { content: "\f130"; }
|
||||
.fi-comment:before { content: "\f131"; }
|
||||
.fi-comments:before { content: "\f132"; }
|
||||
.fi-compass:before { content: "\f133"; }
|
||||
.fi-contrast:before { content: "\f134"; }
|
||||
.fi-credit-card:before { content: "\f135"; }
|
||||
.fi-crop:before { content: "\f136"; }
|
||||
.fi-crown:before { content: "\f137"; }
|
||||
.fi-css3:before { content: "\f138"; }
|
||||
.fi-database:before { content: "\f139"; }
|
||||
.fi-die-five:before { content: "\f13a"; }
|
||||
.fi-die-four:before { content: "\f13b"; }
|
||||
.fi-die-one:before { content: "\f13c"; }
|
||||
.fi-die-six:before { content: "\f13d"; }
|
||||
.fi-die-three:before { content: "\f13e"; }
|
||||
.fi-die-two:before { content: "\f13f"; }
|
||||
.fi-dislike:before { content: "\f140"; }
|
||||
.fi-dollar-bill:before { content: "\f141"; }
|
||||
.fi-dollar:before { content: "\f142"; }
|
||||
.fi-download:before { content: "\f143"; }
|
||||
.fi-eject:before { content: "\f144"; }
|
||||
.fi-elevator:before { content: "\f145"; }
|
||||
.fi-euro:before { content: "\f146"; }
|
||||
.fi-eye:before { content: "\f147"; }
|
||||
.fi-fast-forward:before { content: "\f148"; }
|
||||
.fi-female-symbol:before { content: "\f149"; }
|
||||
.fi-female:before { content: "\f14a"; }
|
||||
.fi-filter:before { content: "\f14b"; }
|
||||
.fi-first-aid:before { content: "\f14c"; }
|
||||
.fi-flag:before { content: "\f14d"; }
|
||||
.fi-folder-add:before { content: "\f14e"; }
|
||||
.fi-folder-lock:before { content: "\f14f"; }
|
||||
.fi-folder:before { content: "\f150"; }
|
||||
.fi-foot:before { content: "\f151"; }
|
||||
.fi-foundation:before { content: "\f152"; }
|
||||
.fi-graph-bar:before { content: "\f153"; }
|
||||
.fi-graph-horizontal:before { content: "\f154"; }
|
||||
.fi-graph-pie:before { content: "\f155"; }
|
||||
.fi-graph-trend:before { content: "\f156"; }
|
||||
.fi-guide-dog:before { content: "\f157"; }
|
||||
.fi-hearing-aid:before { content: "\f158"; }
|
||||
.fi-heart:before { content: "\f159"; }
|
||||
.fi-home:before { content: "\f15a"; }
|
||||
.fi-html5:before { content: "\f15b"; }
|
||||
.fi-indent-less:before { content: "\f15c"; }
|
||||
.fi-indent-more:before { content: "\f15d"; }
|
||||
.fi-info:before { content: "\f15e"; }
|
||||
.fi-italic:before { content: "\f15f"; }
|
||||
.fi-key:before { content: "\f160"; }
|
||||
.fi-laptop:before { content: "\f161"; }
|
||||
.fi-layout:before { content: "\f162"; }
|
||||
.fi-lightbulb:before { content: "\f163"; }
|
||||
.fi-like:before { content: "\f164"; }
|
||||
.fi-link:before { content: "\f165"; }
|
||||
.fi-list-bullet:before { content: "\f166"; }
|
||||
.fi-list-number:before { content: "\f167"; }
|
||||
.fi-list-thumbnails:before { content: "\f168"; }
|
||||
.fi-list:before { content: "\f169"; }
|
||||
.fi-lock:before { content: "\f16a"; }
|
||||
.fi-loop:before { content: "\f16b"; }
|
||||
.fi-magnifying-glass:before { content: "\f16c"; }
|
||||
.fi-mail:before { content: "\f16d"; }
|
||||
.fi-male-female:before { content: "\f16e"; }
|
||||
.fi-male-symbol:before { content: "\f16f"; }
|
||||
.fi-male:before { content: "\f170"; }
|
||||
.fi-map:before { content: "\f171"; }
|
||||
.fi-marker:before { content: "\f172"; }
|
||||
.fi-megaphone:before { content: "\f173"; }
|
||||
.fi-microphone:before { content: "\f174"; }
|
||||
.fi-minus-circle:before { content: "\f175"; }
|
||||
.fi-minus:before { content: "\f176"; }
|
||||
.fi-mobile-signal:before { content: "\f177"; }
|
||||
.fi-mobile:before { content: "\f178"; }
|
||||
.fi-monitor:before { content: "\f179"; }
|
||||
.fi-mountains:before { content: "\f17a"; }
|
||||
.fi-music:before { content: "\f17b"; }
|
||||
.fi-next:before { content: "\f17c"; }
|
||||
.fi-no-dogs:before { content: "\f17d"; }
|
||||
.fi-no-smoking:before { content: "\f17e"; }
|
||||
.fi-page-add:before { content: "\f17f"; }
|
||||
.fi-page-copy:before { content: "\f180"; }
|
||||
.fi-page-csv:before { content: "\f181"; }
|
||||
.fi-page-delete:before { content: "\f182"; }
|
||||
.fi-page-doc:before { content: "\f183"; }
|
||||
.fi-page-edit:before { content: "\f184"; }
|
||||
.fi-page-export-csv:before { content: "\f185"; }
|
||||
.fi-page-export-doc:before { content: "\f186"; }
|
||||
.fi-page-export-pdf:before { content: "\f187"; }
|
||||
.fi-page-export:before { content: "\f188"; }
|
||||
.fi-page-filled:before { content: "\f189"; }
|
||||
.fi-page-multiple:before { content: "\f18a"; }
|
||||
.fi-page-pdf:before { content: "\f18b"; }
|
||||
.fi-page-remove:before { content: "\f18c"; }
|
||||
.fi-page-search:before { content: "\f18d"; }
|
||||
.fi-page:before { content: "\f18e"; }
|
||||
.fi-paint-bucket:before { content: "\f18f"; }
|
||||
.fi-paperclip:before { content: "\f190"; }
|
||||
.fi-pause:before { content: "\f191"; }
|
||||
.fi-paw:before { content: "\f192"; }
|
||||
.fi-paypal:before { content: "\f193"; }
|
||||
.fi-pencil:before { content: "\f194"; }
|
||||
.fi-photo:before { content: "\f195"; }
|
||||
.fi-play-circle:before { content: "\f196"; }
|
||||
.fi-play-video:before { content: "\f197"; }
|
||||
.fi-play:before { content: "\f198"; }
|
||||
.fi-plus:before { content: "\f199"; }
|
||||
.fi-pound:before { content: "\f19a"; }
|
||||
.fi-power:before { content: "\f19b"; }
|
||||
.fi-previous:before { content: "\f19c"; }
|
||||
.fi-price-tag:before { content: "\f19d"; }
|
||||
.fi-pricetag-multiple:before { content: "\f19e"; }
|
||||
.fi-print:before { content: "\f19f"; }
|
||||
.fi-prohibited:before { content: "\f1a0"; }
|
||||
.fi-projection-screen:before { content: "\f1a1"; }
|
||||
.fi-puzzle:before { content: "\f1a2"; }
|
||||
.fi-quote:before { content: "\f1a3"; }
|
||||
.fi-record:before { content: "\f1a4"; }
|
||||
.fi-refresh:before { content: "\f1a5"; }
|
||||
.fi-results-demographics:before { content: "\f1a6"; }
|
||||
.fi-results:before { content: "\f1a7"; }
|
||||
.fi-rewind-ten:before { content: "\f1a8"; }
|
||||
.fi-rewind:before { content: "\f1a9"; }
|
||||
.fi-rss:before { content: "\f1aa"; }
|
||||
.fi-safety-cone:before { content: "\f1ab"; }
|
||||
.fi-save:before { content: "\f1ac"; }
|
||||
.fi-share:before { content: "\f1ad"; }
|
||||
.fi-sheriff-badge:before { content: "\f1ae"; }
|
||||
.fi-shield:before { content: "\f1af"; }
|
||||
.fi-shopping-bag:before { content: "\f1b0"; }
|
||||
.fi-shopping-cart:before { content: "\f1b1"; }
|
||||
.fi-shuffle:before { content: "\f1b2"; }
|
||||
.fi-skull:before { content: "\f1b3"; }
|
||||
.fi-social-500px:before { content: "\f1b4"; }
|
||||
.fi-social-adobe:before { content: "\f1b5"; }
|
||||
.fi-social-amazon:before { content: "\f1b6"; }
|
||||
.fi-social-android:before { content: "\f1b7"; }
|
||||
.fi-social-apple:before { content: "\f1b8"; }
|
||||
.fi-social-behance:before { content: "\f1b9"; }
|
||||
.fi-social-bing:before { content: "\f1ba"; }
|
||||
.fi-social-blogger:before { content: "\f1bb"; }
|
||||
.fi-social-delicious:before { content: "\f1bc"; }
|
||||
.fi-social-designer-news:before { content: "\f1bd"; }
|
||||
.fi-social-deviant-art:before { content: "\f1be"; }
|
||||
.fi-social-digg:before { content: "\f1bf"; }
|
||||
.fi-social-dribbble:before { content: "\f1c0"; }
|
||||
.fi-social-drive:before { content: "\f1c1"; }
|
||||
.fi-social-dropbox:before { content: "\f1c2"; }
|
||||
.fi-social-evernote:before { content: "\f1c3"; }
|
||||
.fi-social-facebook:before { content: "\f1c4"; }
|
||||
.fi-social-flickr:before { content: "\f1c5"; }
|
||||
.fi-social-forrst:before { content: "\f1c6"; }
|
||||
.fi-social-foursquare:before { content: "\f1c7"; }
|
||||
.fi-social-game-center:before { content: "\f1c8"; }
|
||||
.fi-social-github:before { content: "\f1c9"; }
|
||||
.fi-social-google-plus:before { content: "\f1ca"; }
|
||||
.fi-social-hacker-news:before { content: "\f1cb"; }
|
||||
.fi-social-hi5:before { content: "\f1cc"; }
|
||||
.fi-social-instagram:before { content: "\f1cd"; }
|
||||
.fi-social-joomla:before { content: "\f1ce"; }
|
||||
.fi-social-lastfm:before { content: "\f1cf"; }
|
||||
.fi-social-linkedin:before { content: "\f1d0"; }
|
||||
.fi-social-medium:before { content: "\f1d1"; }
|
||||
.fi-social-myspace:before { content: "\f1d2"; }
|
||||
.fi-social-orkut:before { content: "\f1d3"; }
|
||||
.fi-social-path:before { content: "\f1d4"; }
|
||||
.fi-social-picasa:before { content: "\f1d5"; }
|
||||
.fi-social-pinterest:before { content: "\f1d6"; }
|
||||
.fi-social-rdio:before { content: "\f1d7"; }
|
||||
.fi-social-reddit:before { content: "\f1d8"; }
|
||||
.fi-social-skillshare:before { content: "\f1d9"; }
|
||||
.fi-social-skype:before { content: "\f1da"; }
|
||||
.fi-social-smashing-mag:before { content: "\f1db"; }
|
||||
.fi-social-snapchat:before { content: "\f1dc"; }
|
||||
.fi-social-spotify:before { content: "\f1dd"; }
|
||||
.fi-social-squidoo:before { content: "\f1de"; }
|
||||
.fi-social-stack-overflow:before { content: "\f1df"; }
|
||||
.fi-social-steam:before { content: "\f1e0"; }
|
||||
.fi-social-stumbleupon:before { content: "\f1e1"; }
|
||||
.fi-social-treehouse:before { content: "\f1e2"; }
|
||||
.fi-social-tumblr:before { content: "\f1e3"; }
|
||||
.fi-social-twitter:before { content: "\f1e4"; }
|
||||
.fi-social-vimeo:before { content: "\f1e5"; }
|
||||
.fi-social-windows:before { content: "\f1e6"; }
|
||||
.fi-social-xbox:before { content: "\f1e7"; }
|
||||
.fi-social-yahoo:before { content: "\f1e8"; }
|
||||
.fi-social-yelp:before { content: "\f1e9"; }
|
||||
.fi-social-youtube:before { content: "\f1ea"; }
|
||||
.fi-social-zerply:before { content: "\f1eb"; }
|
||||
.fi-social-zurb:before { content: "\f1ec"; }
|
||||
.fi-sound:before { content: "\f1ed"; }
|
||||
.fi-star:before { content: "\f1ee"; }
|
||||
.fi-stop:before { content: "\f1ef"; }
|
||||
.fi-strikethrough:before { content: "\f1f0"; }
|
||||
.fi-subscript:before { content: "\f1f1"; }
|
||||
.fi-superscript:before { content: "\f1f2"; }
|
||||
.fi-tablet-landscape:before { content: "\f1f3"; }
|
||||
.fi-tablet-portrait:before { content: "\f1f4"; }
|
||||
.fi-target-two:before { content: "\f1f5"; }
|
||||
.fi-target:before { content: "\f1f6"; }
|
||||
.fi-telephone-accessible:before { content: "\f1f7"; }
|
||||
.fi-telephone:before { content: "\f1f8"; }
|
||||
.fi-text-color:before { content: "\f1f9"; }
|
||||
.fi-thumbnails:before { content: "\f1fa"; }
|
||||
.fi-ticket:before { content: "\f1fb"; }
|
||||
.fi-torso-business:before { content: "\f1fc"; }
|
||||
.fi-torso-female:before { content: "\f1fd"; }
|
||||
.fi-torso:before { content: "\f1fe"; }
|
||||
.fi-torsos-all-female:before { content: "\f1ff"; }
|
||||
.fi-torsos-all:before { content: "\f200"; }
|
||||
.fi-torsos-female-male:before { content: "\f201"; }
|
||||
.fi-torsos-male-female:before { content: "\f202"; }
|
||||
.fi-torsos:before { content: "\f203"; }
|
||||
.fi-trash:before { content: "\f204"; }
|
||||
.fi-trees:before { content: "\f205"; }
|
||||
.fi-trophy:before { content: "\f206"; }
|
||||
.fi-underline:before { content: "\f207"; }
|
||||
.fi-universal-access:before { content: "\f208"; }
|
||||
.fi-unlink:before { content: "\f209"; }
|
||||
.fi-unlock:before { content: "\f20a"; }
|
||||
.fi-upload-cloud:before { content: "\f20b"; }
|
||||
.fi-upload:before { content: "\f20c"; }
|
||||
.fi-usb:before { content: "\f20d"; }
|
||||
.fi-video:before { content: "\f20e"; }
|
||||
.fi-volume-none:before { content: "\f20f"; }
|
||||
.fi-volume-strike:before { content: "\f210"; }
|
||||
.fi-volume:before { content: "\f211"; }
|
||||
.fi-web:before { content: "\f212"; }
|
||||
.fi-wheelchair:before { content: "\f213"; }
|
||||
.fi-widget:before { content: "\f214"; }
|
||||
.fi-wrench:before { content: "\f215"; }
|
||||
.fi-x-circle:before { content: "\f216"; }
|
||||
.fi-x:before { content: "\f217"; }
|
||||
.fi-yen:before { content: "\f218"; }
|
||||
.fi-zoom-in:before { content: "\f219"; }
|
||||
.fi-zoom-out:before { content: "\f21a"; }
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
6579
record-and-playback/presentation_export/playback/presentation_export/css/foundation.css
vendored
Normal file
6579
record-and-playback/presentation_export/playback/presentation_export/css/foundation.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
424
record-and-playback/presentation_export/playback/presentation_export/css/normalize.css
vendored
Normal file
424
record-and-playback/presentation_export/playback/presentation_export/css/normalize.css
vendored
Normal file
@ -0,0 +1,424 @@
|
||||
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS and IE text size adjust after device orientation change,
|
||||
* without disabling user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability of focused elements when they are also in an
|
||||
* active/hover state.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
box-sizing: content-box; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
20
record-and-playback/presentation_export/playback/presentation_export/lib/foundation.min.js
vendored
Normal file
20
record-and-playback/presentation_export/playback/presentation_export/lib/foundation.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -33,40 +33,49 @@ function getUrlParameters() {
|
||||
// - - - START OF JAVASCRIPT FUNCTIONS - - - //
|
||||
|
||||
// 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(slide.offsetLeft, 10) + parseInt(scaledX, 10)
|
||||
var topValue = parseInt(slide.offsetTop, 10) + parseInt(scaledY, 10)
|
||||
if (leftValue < 0){
|
||||
leftValue = 0
|
||||
}
|
||||
if (topValue < 0){
|
||||
topValue = 0
|
||||
}
|
||||
cursorStyle.left = leftValue + "px";
|
||||
cursorStyle.top = topValue + "px";
|
||||
function drawCursor(scaledX, scaledY, img) {
|
||||
var containerObj = $("#slide > object");
|
||||
|
||||
// the offsets of the image inside its parent
|
||||
// Note: this block is only necessary if we let the svg do the resizing
|
||||
// of the image, see the comments in resizeSlides()
|
||||
var imgRect = img.getBoundingClientRect();
|
||||
var imageX = 0; //imgRect.x;
|
||||
var imageY = 0; //imgRect.y;
|
||||
|
||||
// the offsets of the container that has the image inside it
|
||||
var containerX = containerObj.offset().left;
|
||||
var containerY = containerObj.offset().top;
|
||||
|
||||
// calculates the overall offsets of the image in the page
|
||||
var imageOffsetX = containerX + imageX;
|
||||
var imageOffsetY = containerY + imageY;
|
||||
|
||||
// position of the cursor relative to the container
|
||||
var cursorXInImage = scaledX * containerObj.width();
|
||||
var cursorYInImage = scaledY * containerObj.height();
|
||||
|
||||
// absolute position of the cursor in the page
|
||||
var cursorLeft = parseInt(imageOffsetX + cursorXInImage, 10);
|
||||
var cursorTop = parseInt(imageOffsetY + cursorYInImage, 10);
|
||||
if (cursorLeft < 0) {
|
||||
cursorLeft = 0;
|
||||
}
|
||||
if (cursorTop < 0) {
|
||||
cursorTop = 0;
|
||||
}
|
||||
var cursorStyle = document.getElementById("cursor").style;
|
||||
cursorStyle.left = cursorLeft + "px";
|
||||
cursorStyle.top = cursorTop + "px";
|
||||
}
|
||||
|
||||
|
||||
// Shows or hides the cursor object depending on true/false parameter passed.
|
||||
function showCursor(boolVal) {
|
||||
cursorStyle = document.getElementById("cursor").style;
|
||||
if(boolVal === false) {
|
||||
cursorStyle.height = "0px";
|
||||
cursorStyle.width = "0px";
|
||||
}
|
||||
else {
|
||||
cursorStyle.height = "10px";
|
||||
cursorStyle.width = "10px";
|
||||
}
|
||||
}
|
||||
function showCursor(show) {
|
||||
if (show) {
|
||||
document.getElementById("cursor").style.visibility = 'visible';
|
||||
} else {
|
||||
document.getElementById("cursor").style.visibility = 'hidden';
|
||||
}
|
||||
};
|
||||
|
||||
function setViewBox(val) {
|
||||
if(svgobj.contentDocument) svgfile = svgobj.contentDocument.getElementById("svgfile");
|
||||
@ -74,10 +83,6 @@ function setViewBox(val) {
|
||||
svgfile.setAttribute('viewBox', val);
|
||||
}
|
||||
|
||||
function setCursor(val) {
|
||||
draw(val[0], val[1]);
|
||||
}
|
||||
|
||||
function getImageAtTime(time) {
|
||||
var curr_t = parseFloat(time);
|
||||
var key;
|
||||
@ -119,8 +124,13 @@ function removeSlideChangeAttribute() {
|
||||
|
||||
// - - - END OF JAVASCRIPT FUNCTIONS - - - //
|
||||
|
||||
|
||||
|
||||
function runPopcorn() {
|
||||
console.log("** Running popcorn");
|
||||
|
||||
getMetadata();
|
||||
|
||||
if(svgobj.contentDocument) svgfile = svgobj.contentDocument.getElementById("svgfile");
|
||||
else svgfile = svgobj.getSVGDocument('svgfile');
|
||||
|
||||
@ -144,11 +154,17 @@ function runPopcorn() {
|
||||
var shapeelements = xmlDoc.getElementsByTagName("svg");
|
||||
|
||||
//get the array of values for the first shape (getDataPoints(0) is the first shape).
|
||||
var array = $(shapeelements[0]).find("g").filter(function(){ //get all the lines from the svg file
|
||||
var array = $(shapeelements[0]).find("g").filter(function(){ //get all the lines from the svg file
|
||||
return $(this).attr('class') == 'shape';
|
||||
});
|
||||
var images = shapeelements[0].getElementsByTagName("image");
|
||||
|
||||
// Newer recordings have slide images identified by class="slide"
|
||||
// because they might include images in shapes
|
||||
var images = shapeelements[0].getElementsByClassName("slide");
|
||||
// To handle old recordings, fetch a list of all images instead
|
||||
if (images.length == 0) {
|
||||
images = shapeelements[0].getElementsByTagName("image");
|
||||
}
|
||||
|
||||
//create a map from timestamp to id list
|
||||
var timestampToId = {};
|
||||
@ -175,7 +191,7 @@ function runPopcorn() {
|
||||
for(var n = 0; n < len; n++) {
|
||||
imageAtTime[[images[m].getAttribute("in").split(" ")[n], images[m].getAttribute("out").split(" ")[n]]] = images[m].getAttribute("id");
|
||||
}
|
||||
|
||||
|
||||
// the logo at the start has no text attribute
|
||||
if (images[m].getAttribute("text")) {
|
||||
var txtFile = false;
|
||||
@ -240,11 +256,10 @@ function runPopcorn() {
|
||||
for (var m = 0; m < clen; m++) {
|
||||
cursorValues[cursorArray[m].getAttribute("timestamp")] = coords[m].childNodes[0].data;
|
||||
}
|
||||
|
||||
|
||||
|
||||
svgobj.style.left = document.getElementById("slide").offsetLeft + "px";
|
||||
svgobj.style.top = "8px";
|
||||
svgobj.style.top = "0px";
|
||||
var next_shape;
|
||||
var shape;
|
||||
for (var j = 0; j < array.length - 1; j++) { //iterate through all the shapes and pick out the main ones
|
||||
@ -261,7 +276,7 @@ function runPopcorn() {
|
||||
}
|
||||
|
||||
var get_shapes_in_time = function(t) {
|
||||
console.log("** Getting shapes in time");
|
||||
// console.log("** Getting shapes in time");
|
||||
var shapes_in_time = timestampToId[t];
|
||||
var shapes = [];
|
||||
if (shapes_in_time != undefined) {
|
||||
@ -278,7 +293,7 @@ function runPopcorn() {
|
||||
}
|
||||
}
|
||||
return shapes;
|
||||
}
|
||||
};
|
||||
|
||||
var p = new Popcorn("#video");
|
||||
//update 60x / second the position of the next value.
|
||||
@ -296,10 +311,10 @@ function runPopcorn() {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
var time_s = array[i].getAttribute("timestamp");
|
||||
var time_f = parseFloat(time_s);
|
||||
|
||||
|
||||
if(svgobj.contentDocument) shape = svgobj.contentDocument.getElementById(array[i].getAttribute("id"));
|
||||
else shape = svgobj.getSVGDocument('svgfile').getElementById(array[i].getAttribute("id"));
|
||||
|
||||
|
||||
var shape_i = shape.getAttribute("shape");
|
||||
if (time_f < t) {
|
||||
if(current_shapes.indexOf(shape_i) > -1) { //currently drawing the same shape so don't draw the older steps
|
||||
@ -332,24 +347,31 @@ function runPopcorn() {
|
||||
shape.style.visibility = "hidden";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
var next_image = getImageAtTime(t); //fetch the name of the image at this time.
|
||||
var imageXOffset = 0;
|
||||
var imageYOffset = 0;
|
||||
if((current_image !== next_image) && (next_image !== undefined)){ //changing slide image
|
||||
|
||||
if(current_image && (current_image !== next_image) && (next_image !== undefined)){ //changing slide image
|
||||
if(svgobj.contentDocument) {
|
||||
svgobj.contentDocument.getElementById(current_image).style.visibility = "hidden";
|
||||
var img = svgobj.contentDocument.getElementById(current_image);
|
||||
if (img) {
|
||||
img.style.visibility = "hidden";
|
||||
}
|
||||
var ni = svgobj.contentDocument.getElementById(next_image);
|
||||
}
|
||||
else {
|
||||
svgobj.getSVGDocument('svgfile').getElementById(current_image).style.visibility = "hidden";
|
||||
var img = svgobj.getSVGDocument('svgfile').getElementById(current_image);
|
||||
if (img) {
|
||||
img.style.visibility = "hidden";
|
||||
}
|
||||
var ni = svgobj.getSVGDocument('svgfile').getElementById(next_image);
|
||||
}
|
||||
document.getElementById("slideText").innerHTML = ""; //destroy old plain text
|
||||
|
||||
|
||||
ni.style.visibility = "visible";
|
||||
document.getElementById("slideText").innerHTML = slidePlainText[next_image] + next_image; //set new plain text
|
||||
|
||||
|
||||
if ($("#accEnabled").is(':checked')) {
|
||||
//pause the playback on slide change
|
||||
p.pause();
|
||||
@ -359,57 +381,68 @@ function runPopcorn() {
|
||||
|
||||
var num_current = current_image.substr(5);
|
||||
var num_next = next_image.substr(5);
|
||||
|
||||
|
||||
if(svgobj.contentDocument) currentcanvas = svgobj.contentDocument.getElementById("canvas" + num_current);
|
||||
else currentcanvas = svgobj.getSVGDocument('svgfile').getElementById("canvas" + num_current);
|
||||
|
||||
|
||||
if(currentcanvas !== null) {
|
||||
currentcanvas.setAttribute("display", "none");
|
||||
}
|
||||
|
||||
|
||||
if(svgobj.contentDocument) nextcanvas = svgobj.contentDocument.getElementById("canvas" + num_next);
|
||||
else nextcanvas = svgobj.getSVGDocument('svgfile').getElementById("canvas" + num_next);
|
||||
|
||||
|
||||
if((nextcanvas !== undefined) && (nextcanvas != null)) {
|
||||
nextcanvas.setAttribute("display", "");
|
||||
}
|
||||
previous_image = current_image;
|
||||
current_image = next_image;
|
||||
}
|
||||
|
||||
|
||||
if(svgobj.contentDocument) var thisimg = svgobj.contentDocument.getElementById(current_image);
|
||||
else var thisimg = svgobj.getSVGDocument('svgfile').getElementById(current_image);
|
||||
|
||||
var offsets = thisimg.getBoundingClientRect();
|
||||
// Offsets divided by 4. By 2 because of the padding and by 2 again because 800x600 is half 1600x1200
|
||||
imageXOffset = (1600 - parseInt(thisimg.getAttribute("width"), 10))/4;
|
||||
imageYOffset = (1200 - parseInt(thisimg.getAttribute("height"), 10))/4;
|
||||
|
||||
|
||||
var vboxVal = getViewboxAtTime(t);
|
||||
if(vboxVal !== undefined) {
|
||||
setViewBox(vboxVal);
|
||||
}
|
||||
|
||||
var cursorVal = getCursorAtTime(t);
|
||||
var cursor_on = false;
|
||||
if(cursorVal != null) {
|
||||
if(!cursor_on) {
|
||||
document.getElementById("cursor").style.visibility = 'visible'; //make visible
|
||||
cursor_on = true;
|
||||
if (thisimg) {
|
||||
var imageWidth = parseInt(thisimg.getAttribute("width"), 10);
|
||||
var imageHeight = parseInt(thisimg.getAttribute("height"), 10);
|
||||
|
||||
var vboxVal = getViewboxAtTime(t);
|
||||
if(vboxVal !== undefined) {
|
||||
setViewBox(vboxVal);
|
||||
}
|
||||
setCursor([parseFloat(cursorVal[0]) + imageXOffset - 6, parseFloat(cursorVal[1]) + imageYOffset - 6]); //-6 is for radius of cursor offset
|
||||
|
||||
var cursorVal = getCursorAtTime(t);
|
||||
if (cursorVal != null) {
|
||||
cursorShownAt = new Date().getTime();
|
||||
showCursor(true);
|
||||
// width and height are divided by 2 because that's the value used as a reference
|
||||
// when positions in cursor.xml is calculated
|
||||
drawCursor(parseFloat(cursorVal[0]) / (imageWidth/2), parseFloat(cursorVal[1]) / (imageHeight/2), thisimg);
|
||||
|
||||
// hide the cursor after 3s of inactivity
|
||||
} else if (cursorShownAt < new Date().getTime() - 3000) {
|
||||
showCursor(false);
|
||||
}
|
||||
|
||||
// store the current slide and adjust the size of the slides
|
||||
currentImage = thisimg;
|
||||
resizeSlides();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
function removeLoadingScreen() {
|
||||
spinner.stop();
|
||||
$("#playback-content").css('visibility','visible');
|
||||
$("#loading-recording").css('visibility','hidden');
|
||||
$("#loading-recording").css('height','0');
|
||||
$("#load-recording-msg").css('display','none');
|
||||
}
|
||||
|
||||
function defineStartTime() {
|
||||
console.log("** Defining start time");
|
||||
spinner.stop();
|
||||
$("#playback-content").css('visibility','visible');
|
||||
$("#load-recording-msg").css('display','none');
|
||||
|
||||
if (params.t === undefined)
|
||||
return 1;
|
||||
@ -441,6 +474,7 @@ function defineStartTime() {
|
||||
|
||||
var current_canvas = "canvas0";
|
||||
var current_image = "image0";
|
||||
var previous_image = null;
|
||||
var currentcanvas;
|
||||
var shape;
|
||||
var nextcanvas;
|
||||
@ -467,50 +501,107 @@ var cursorValues = {};
|
||||
var imageAtTime = {};
|
||||
var slidePlainText = {}; //holds slide plain text for retrieval
|
||||
var cursorStyle;
|
||||
var cursorShownAt = 0;
|
||||
|
||||
var url = "resources/";
|
||||
var params = getUrlParameters();
|
||||
var MEETINGID = params.meetingId;
|
||||
// var HOST = window.location.host;
|
||||
// var url = "http://" + HOST + "/presentation/" + MEETINGID;
|
||||
var url = "resources";
|
||||
var shapes_svg = url + '/shapes.svg';
|
||||
var events_xml = url + '/panzooms.xml';
|
||||
var cursor_xml = url + '/cursor.xml';
|
||||
var metadata_xml = url + '/metadata.xml';
|
||||
|
||||
var firstLoad = true;
|
||||
var svjobjLoaded = false;
|
||||
|
||||
var svgobj = document.createElement('object');
|
||||
svgobj.setAttribute('data', shapes_svg);
|
||||
svgobj.setAttribute('height', '600px');
|
||||
svgobj.setAttribute('width', '800px');
|
||||
svgobj.addEventListener('load', runPopcorn, false);
|
||||
svgobj.setAttribute('height', '100%');
|
||||
svgobj.setAttribute('width', '100%');
|
||||
|
||||
/**
|
||||
* we need an urgently refactor here
|
||||
* first the writing.js must be loaded, and then runPopcorn loads, but it loads
|
||||
* only after the svg file gets loaded, and the generation of thumbnails must
|
||||
* came after that because it needs the popcorn element to be created properly
|
||||
*/
|
||||
svgobj.addEventListener('load', function() {
|
||||
console.log("** svgobj [load] listener activated");
|
||||
generateThumbnails();
|
||||
var p = Popcorn("#video");
|
||||
p.on('loadeddata', function() {
|
||||
console.log("** popcorn video: [onloadeddata] activaded");
|
||||
p.currentTime(defineStartTime());
|
||||
console.log("got svgobj 'load' event");
|
||||
runPopcorn();
|
||||
|
||||
});
|
||||
|
||||
// Sometimes media has already loaded before our loadeddata listener is
|
||||
// attached. If the media is already past the loadeddata stage then we
|
||||
// trigger the event manually ourselves
|
||||
if ($('#video')[0].readyState > 0) {
|
||||
console.log("** Video tag readyState >0");
|
||||
p.emit('loadeddata');
|
||||
if (svjobjLoaded) {
|
||||
return;
|
||||
}
|
||||
svjobjLoaded = true;
|
||||
|
||||
generateThumbnails();
|
||||
|
||||
var p = Popcorn("#video");
|
||||
p.currentTime(defineStartTime());
|
||||
|
||||
removeLoadingScreen();
|
||||
}, false);
|
||||
|
||||
// Fetches the metadata associated with the recording and uses it to configure
|
||||
// the playback page
|
||||
var getMetadata = function() {
|
||||
var xmlhttp;
|
||||
if (window.XMLHttpRequest) {// code for IE7, Firefox, Chrome, Opera, Safari
|
||||
xmlhttp = new XMLHttpRequest();
|
||||
} else {// code for IE6, IE5
|
||||
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
|
||||
}
|
||||
xmlhttp.open("GET", metadata_xml, false);
|
||||
xmlhttp.send(null);
|
||||
|
||||
if (xmlhttp.responseXML)
|
||||
var xmlDoc = xmlhttp.responseXML;
|
||||
else {
|
||||
var parser = new DOMParser();
|
||||
var xmlDoc = parser.parseFromString(xmlhttp.responseText, "application/xml");
|
||||
}
|
||||
|
||||
var metadata = xmlDoc.getElementsByTagName("meta");
|
||||
if (metadata.length > 0) {
|
||||
metadata = metadata[0];
|
||||
|
||||
var meetingName = metadata.getElementsByTagName("meetingName");
|
||||
if (meetingName.length > 0) {
|
||||
$("#recording-title").text(meetingName[0].textContent);
|
||||
$("#recording-title").attr("title", meetingName[0].textContent);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.getElementById('slide').appendChild(svgobj);
|
||||
|
||||
var currentImage;
|
||||
|
||||
// A small hack to hide the cursor when resizing the window, so it's not
|
||||
// misplaced while the window is being resized
|
||||
window.onresize = function(event) {
|
||||
svgobj.style.left = document.getElementById("slide").offsetLeft + "px";
|
||||
svgobj.style.top = "8px";
|
||||
showCursor(false);
|
||||
resizeSlides();
|
||||
};
|
||||
|
||||
// Resize the container that has the slides (and whiteboard) to be the maximum
|
||||
// size possible but still maintaining the aspect ratio of the slides.
|
||||
//
|
||||
// This is done here only because of pan and zoom. Pan/zoom is done by modifiyng
|
||||
// the svg's viewBox, and that requires the container that has the svg to be the
|
||||
// exact size we want to display the slides so that parts of the svg that are outside
|
||||
// of its parent's area are hidden. If we let the svg occupy all presentation area
|
||||
// (letting the svg do the image resizing), the slides will move and zoom around the
|
||||
// entire area when pan/zoom is activated, usually displaying more of the slide
|
||||
// than we want to (i.e. more than was displayed in the conference).
|
||||
var resizeSlides = function() {
|
||||
if (currentImage) {
|
||||
var $slide = $("#slide");
|
||||
|
||||
var imageWidth = parseInt(currentImage.getAttribute("width"), 10);
|
||||
var imageHeight = parseInt(currentImage.getAttribute("height"), 10);
|
||||
var imgRect = currentImage.getBoundingClientRect();
|
||||
var aspectRatio = imageWidth/imageHeight;
|
||||
var max = aspectRatio * $slide.parent().outerHeight();
|
||||
$slide.css("max-width", max);
|
||||
|
||||
var height = $slide.parent().width() / aspectRatio;
|
||||
$slide.css("max-height", height);
|
||||
}
|
||||
};
|
||||
|
||||
BIN
record-and-playback/presentation_export/playback/presentation_export/logo.png
Executable file → Normal file
BIN
record-and-playback/presentation_export/playback/presentation_export/logo.png
Executable file → Normal file
Binary file not shown.
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 17 KiB |
@ -0,0 +1,348 @@
|
||||
/*
|
||||
|
||||
BigBlueButton open source conferencing system - http://www.bigbluebutton.org/
|
||||
|
||||
Copyright (c) 2012 BigBlueButton Inc. and by respective authors (see below).
|
||||
|
||||
This program is free software; you can redistribute it and/or modify it under the
|
||||
terms of the GNU Lesser General Public License as published by the Free Software
|
||||
Foundation; either version 3.0 of the License, or (at your option) any later
|
||||
version.
|
||||
|
||||
BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
|
||||
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
|
||||
PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU Lesser General Public License along
|
||||
with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
*/
|
||||
|
||||
/* Visually hides text
|
||||
* see: yaccessibilityblog.com/library/css-clip-hidden-content.html
|
||||
*/
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
padding: 0 !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Foundation overrides */
|
||||
.row {
|
||||
max-width: 100%; /* Foundation restricts the rows to ~1000px */
|
||||
}
|
||||
button, .button {
|
||||
margin-bottom: 0; /* this has impact in the media player buttons */
|
||||
}
|
||||
body {
|
||||
color: #111;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Main containers need to fill the entire page height */
|
||||
body, #playback-content, #playback-row, #main-section, #side-section {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Restrict the page to a minimum width */
|
||||
html, .acorn-controls {
|
||||
min-width: 310px;
|
||||
}
|
||||
|
||||
|
||||
/* Swappable components have different settings depending on where they are */
|
||||
#main-section #presentation-area {
|
||||
height: 100%;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#main-section #video-area, #main-section #audio-area {
|
||||
height: 100%;
|
||||
margin-bottom: 5px;
|
||||
background: #fff;
|
||||
}
|
||||
#side-section #presentation-area {
|
||||
height: 30%; /* we HAVE to set a height here, otherwise the slides won't scale properly */
|
||||
min-height: 250px;
|
||||
}
|
||||
#side-section #video-area, #side-section #audio-area {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Some internal elements should just fill the entire size of their parents,
|
||||
that will control their size. */
|
||||
#slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
/* vertical alignment */
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#chat {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#video-area, #video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* can't set height:100% here because the height is controlled automatically
|
||||
to maintain the aspect ratio. */
|
||||
}
|
||||
.acorn-player {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* The playback bar is moved out of the video/audio area into a more
|
||||
generic place in the page, making it look like the controls are not
|
||||
only for audio and video, but for all playback. */
|
||||
#audio-area .acorn-controls, #video-area .acorn-controls {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
/* Prevent unwanted scrollbars and "leaking" elements in the page */
|
||||
body {
|
||||
overflow: hidden;
|
||||
/* background: #f6f6f6; */
|
||||
}
|
||||
#main-section {
|
||||
border-right: 1px solid #e2e2e2;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
/* Chat style */
|
||||
#chat {
|
||||
padding: 0 10px;
|
||||
overflow-y: auto;
|
||||
word-wrap: break-word;
|
||||
background: #fff;
|
||||
|
||||
/* we use borders here instead of padding because the top/bottom
|
||||
padding doesn't really work with a vertical scrollbar */
|
||||
border-top: 5px solid #fff;
|
||||
border-bottom: 5px solid #fff;
|
||||
}
|
||||
#chat strong {
|
||||
color: #888;
|
||||
}
|
||||
#chat-area {
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
}
|
||||
#chat > div {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
/* Navbar style */
|
||||
#navbar {
|
||||
height: 48px;
|
||||
border-bottom: 1px solid #e2e2e2;
|
||||
background: white;
|
||||
padding: 0 10px 0 0;
|
||||
}
|
||||
#recording-title {
|
||||
font-size: 1.45rem;
|
||||
padding-top: 8px;
|
||||
margin: 0;
|
||||
color: #666666;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#navbar .sidebar-icon {
|
||||
font-size: 1.65em;
|
||||
margin-right: 15px;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
border-right: 1px solid #e2e2e2;
|
||||
float: left;
|
||||
color: #666;
|
||||
padding-top: 8px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
/* Presentation and related elements */
|
||||
#slide {
|
||||
background-image: url('logo.png');
|
||||
background-size: 160px 160px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
}
|
||||
#cursor {
|
||||
visibility: hidden;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: translate(-6px, -6px);
|
||||
border-radius: 50%;
|
||||
position: fixed;
|
||||
background: red;
|
||||
z-index: 10;
|
||||
}
|
||||
#main-section {
|
||||
padding: 10px 10px 25px 10px;
|
||||
}
|
||||
#copyright {
|
||||
width: 100%;
|
||||
font-size: 0.65rem;
|
||||
text-align: center;
|
||||
color: #888;
|
||||
bottom: 5px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
/* Thumbnails */
|
||||
#thumbnails {
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
#thumbnails .thumbnail-wrapper {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
#thumbnails .thumbnail-wrapper.active,
|
||||
#thumbnails .thumbnail-wrapper.active:hover {
|
||||
background-color: #D9EDF7;
|
||||
}
|
||||
#thumbnails .thumbnail-wrapper.active img,
|
||||
#thumbnails .thumbnail-wrapper.active:hover img {
|
||||
border-color: #289ad6; /* #314b5d; */
|
||||
}
|
||||
#thumbnails .thumbnail-wrapper:hover img {
|
||||
border-color: #289ad6; /* #314b5d; */
|
||||
}
|
||||
#thumbnails img {
|
||||
max-height: 125px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
#thumbnails .thumbnail-wrapper.hovered .thumbnail-label,
|
||||
#thumbnails .thumbnail-wrapper.active .thumbnail-label {
|
||||
display: block;
|
||||
}
|
||||
#thumbnails .thumbnail-label {
|
||||
color: #fff;
|
||||
background: #289ad6;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
display: none;
|
||||
padding: 2px 5px;
|
||||
}
|
||||
|
||||
/* Sliding sidebar */
|
||||
.inner-wrap {
|
||||
height: 100%;
|
||||
}
|
||||
.left-off-canvas-menu {
|
||||
background: #fff;
|
||||
width: 13rem;
|
||||
border-right: 1px solid #e2e2e2;
|
||||
}
|
||||
.move-right > .inner-wrap {
|
||||
-webkit-transform: translate3d(13rem, 0, 0);
|
||||
-moz-transform: translate3d(13rem, 0, 0);
|
||||
-ms-transform: translate(13rem, 0);
|
||||
-o-transform: translate3d(13rem, 0, 0);
|
||||
transform: translate3d(13rem, 0, 0);
|
||||
}
|
||||
ul.off-canvas-list li label {
|
||||
background: #2a2d34;
|
||||
color: #eee;
|
||||
}
|
||||
.exit-off-canvas {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/* Video style */
|
||||
#video {
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
/* Loading page with a spinner */
|
||||
#loading-recording {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#load-recording-msg {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Small screens only */
|
||||
@media only screen and (max-width: 40em) {
|
||||
#copyright {
|
||||
font-size: 0.6rem;
|
||||
}
|
||||
#chat {
|
||||
font-size: 12px;
|
||||
}
|
||||
#side-section #presentation-area {
|
||||
min-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium screens up */
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
#side-section #presentation-area {
|
||||
min-height: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large screens up */
|
||||
/* @media only screen and (min-width: 64.063em) { */
|
||||
/* } */
|
||||
|
||||
@media (orientation: portrait) {
|
||||
#main-section, #side-section {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
#slide {
|
||||
/* background-size: contain; */
|
||||
}
|
||||
#side-section #video-area {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#chat {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* show only video or only presentation, not both */
|
||||
#side-section #video-area video, #side-section #presentation-area {
|
||||
display: none;
|
||||
}
|
||||
#chat-area {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
@ -16,90 +16,109 @@ PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
|
||||
You should have received a copy of the GNU Lesser General Public License along
|
||||
with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
-->
|
||||
<html>
|
||||
<html class="no-js" lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Recording Playback</title>
|
||||
<link rel="stylesheet" href="playback/css/bbb.playback.css">
|
||||
<script type="text/javascript" src="playback/lib/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/jquery-ui.min.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/spin.min.js"></script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="playback/acornmediaplayer/acornmediaplayer.base.css" />
|
||||
<script type="text/javascript" src="playback/acornmediaplayer/jquery.acornmediaplayer.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="playback/acornmediaplayer/themes/access/acorn.access.css" />
|
||||
<link rel="stylesheet" type="text/css" href="playback/acornmediaplayer/themes/darkglass/acorn.darkglass.css" />
|
||||
<link rel="stylesheet" type="text/css" href="playback/acornmediaplayer/themes/bigbluebutton/acorn.bigbluebutton.css" />
|
||||
<link rel="stylesheet" type="text/css" href="playback/css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="playback/css/foundation.css" />
|
||||
<link rel="stylesheet" type="text/css" href="playback/css/foundation-icons.css" />
|
||||
<link rel="stylesheet" href="playback/playback.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="loading-recording">
|
||||
<div id="spinner"></div>
|
||||
<p id="load-recording-msg">Initializing recording</p>
|
||||
</div>
|
||||
<div class="circle" id="cursor"></div>
|
||||
<div id="playback-content" class="off-canvas-wrap" data-offcanvas>
|
||||
|
||||
<div class="inner-wrap">
|
||||
<div id="navbar">
|
||||
<a class="left-off-canvas-toggle menu-icon" href="#">
|
||||
<i class="sidebar-icon fi-list"></i>
|
||||
</a>
|
||||
<h1 id="recording-title">Recording Playback</h1>
|
||||
</div>
|
||||
|
||||
<aside class="left-off-canvas-menu">
|
||||
<ul class="off-canvas-list">
|
||||
<li><label>Slides</label></li>
|
||||
<div id="thumbnails" role="region" aria-label="Slide thumbnails"></div>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<a class="exit-off-canvas"></a>
|
||||
|
||||
<div id="playback" role="main" class="row small-collapse">
|
||||
|
||||
<h2 class="show-for-sr">Presentation Slides</h2>
|
||||
<div id="main-section" class="small-8 columns">
|
||||
<div id="presentation-area" role="region" aria-label="Presentation" data-swap>
|
||||
<div id="slide" role="img" aria-labelledby="slideText"></div>
|
||||
<div id="slideText" class="show-for-sr" aria-live="polite"></div>
|
||||
</div>
|
||||
|
||||
<div id="copyright">
|
||||
Recorded with <a target="_blank" href="http://mconf.org/">Mconf</a>.
|
||||
Use <a target="_blank" href="http://mozilla.org/firefox">Mozilla Firefox</a> to play this recording.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="side-section" class="small-4 columns">
|
||||
<h2 class="show-for-sr">Chat Messages</h2>
|
||||
<input type="checkbox" name="exposechat" id="exposechat" value="exposechat" class="show-for-sr" checked="checked" />
|
||||
<label for="exposechat" class="show-for-sr">Read chat messages</label>
|
||||
<div id="chat-area">
|
||||
<div id="chat" aria-live="polite" role="region" aria-label="Chat messages"></div>
|
||||
</div>
|
||||
<div id="video-area" class="clearfix" role="region" aria-label="Video" title="Click to play or pause the playback" data-swap>
|
||||
<!--
|
||||
<video id="webcam">You must use an HTML5 capable browser to view this page.
|
||||
This playback requires modern browser, please use FF, Safari, Chrome</video>
|
||||
-->
|
||||
</div>
|
||||
<div id="audio-area" role="region" aria-label="Audio">
|
||||
<!--
|
||||
<audio id="video">You must use an HTML5 capable browser to view this page.
|
||||
This playback requires modern browser, please use FF, Safari, Chrome</audio>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!--
|
||||
<div id="accInfo">
|
||||
<input id="accEnabled" type="checkbox" value="accEnabled" />
|
||||
<label for="accEnabled">Enable accessibility pauses</label><br/>
|
||||
<div id="countdown" />
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="playback/lib/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/jquery-ui.min.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/foundation.min.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/spin.min.js"></script>
|
||||
<script type="text/javascript" src="playback/acornmediaplayer/jquery.acornmediaplayer.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/writing.js"></script>
|
||||
<script type="text/javascript" src="playback/playback.js"></script>
|
||||
<!-- popcorn has to be loaded after playback.js, otherwise the chat won't be displayed -->
|
||||
<script type="text/javascript" src="playback/lib/popcorn-complete.min.js"></script>
|
||||
<script type="text/javascript" src="playback/lib/popcorn.chattimeline.js"></script>
|
||||
<script>
|
||||
$(document).foundation();
|
||||
</script>
|
||||
|
||||
<!--script type="text/javascript">
|
||||
jQuery(function() {
|
||||
|
||||
});
|
||||
</script-->
|
||||
|
||||
<style>
|
||||
.acorn-player.darkglass {
|
||||
overflow: visible;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="loading-recording">
|
||||
<div id="spinner"></div>
|
||||
<p id="load-recording-msg">Initializing recording </p>
|
||||
</div>
|
||||
<div id="playback-content">
|
||||
<h1 class="visually-hidden">BigBlueButton Playback</h1>
|
||||
<div id="playbackArea" class="clearfix" role="main">
|
||||
<h2 class="visually-hidden">Slide Thumbnails</h2>
|
||||
<div id="thumbnails" role="region" aria-label="Slide thumbnails"></div>
|
||||
<h2 class="visually-hidden">Presentation Slides</h2>
|
||||
<div id="presentation">
|
||||
<div class="circle" id="cursor" style="visibility:hidden;"></div>
|
||||
<div id="slide" role="img" aria-labelledby="slideText"></div>
|
||||
<div id="slideText" class="visually-hidden" aria-live="polite"></div>
|
||||
</div>
|
||||
<div id="chatAndMediaArea">
|
||||
<h2 class="visually-hidden">Chat Messages</h2>
|
||||
<input type="checkbox" name="exposechat" id="exposechat" value="exposechat" class="visually-hidden" checked="checked" />
|
||||
<label for="exposechat" class="visually-hidden">Read chat messages</label>
|
||||
<div id="chat" aria-live="polite" role="region" aria-label="Chat messages"></div>
|
||||
<div id="videoRecordingWrapper" role="region" aria-label="Video">
|
||||
<!--
|
||||
<video id="webcam" >You must use an HTML5 capable browser to view this page.
|
||||
This playback requires modern browser, please use FF, Safari, Chrome</video>
|
||||
-->
|
||||
</div>
|
||||
<div id="audioRecordingWrapper" role="region" aria-label="Audio">
|
||||
<!--
|
||||
<audio id="video">You must use an HTML5 capable browser to view this page.
|
||||
This playback requires modern browser, please use FF, Safari, Chrome</audio>
|
||||
-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--div id="playbackControls">
|
||||
<div id="autoscrollWrapper">
|
||||
<input id="autoscrollEnabled" type="checkbox" name="autoscrollEnabled" checked="true" aria-label="Toggle autoscroll"/>
|
||||
<label for="autoscrollEnabled">Auto scroll</label>
|
||||
</div>
|
||||
</div-->
|
||||
|
||||
<!--
|
||||
<div id="accInfo">
|
||||
<input id="accEnabled" type="checkbox" value="accEnabled" />
|
||||
<label for="accEnabled">Enable accessibility pauses</label><br/>
|
||||
<div id="countdown" />
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
<div id="footer">
|
||||
<p>Recorded with <a target="_blank" href="http://mconf.org/">Mconf</a>. </p>
|
||||
<p>Compatible with <a target="_blank" href="http://mozilla.org/firefox">Mozilla Firefox</a> only.</p>
|
||||
</div>
|
||||
<!-- <script src='playback/lib/writing.js'></script> -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -19,25 +19,22 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
goToSlide = function(time) {
|
||||
console.log("==Going to slide");
|
||||
var pop = Popcorn("#video");
|
||||
pop.currentTime(time);
|
||||
}
|
||||
};
|
||||
|
||||
getUrlParameters = function() {
|
||||
console.log("==Getting url parameters");
|
||||
var map = {};
|
||||
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
||||
map[key] = value;
|
||||
});
|
||||
return map;
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
* From: http://stackoverflow.com/questions/1634748/how-can-i-delete-a-query-string-parameter-in-javascript/4827730#4827730
|
||||
*/
|
||||
removeUrlParameter = function(url, param) {
|
||||
console.log("==Removing url params");
|
||||
var urlparts= url.split('?');
|
||||
if (urlparts.length>=2) {
|
||||
var prefix= encodeURIComponent(param)+'=';
|
||||
@ -115,6 +112,7 @@ var MEETINGID = params['meetingId'];
|
||||
var RECORDINGS = "./resources";
|
||||
var SLIDES_XML = RECORDINGS + '/slides_new.xml';
|
||||
var SHAPES_SVG = RECORDINGS + '/shapes.svg';
|
||||
var hasVideo = false;
|
||||
|
||||
/*
|
||||
* Sets the title attribute in a thumbnail.
|
||||
@ -124,11 +122,11 @@ setTitleOnThumbnail = function($thumb) {
|
||||
if (src !== undefined) {
|
||||
var num = "?";
|
||||
var name = "undefined";
|
||||
var match = src.match(/slide-(.*).png/)
|
||||
var match = src.match(/slide-(.*).png/);
|
||||
if (match) { num = match[1]; }
|
||||
match = src.match(/([^/]*)\/slide-.*\.png/)
|
||||
match = src.match(/([^/]*)\/slide-.*\.png/);
|
||||
if (match) { name = match[1]; }
|
||||
$thumb.attr("title", name + " (" + num + ")")
|
||||
$thumb.attr("title", name + " (" + num + ")");
|
||||
}
|
||||
}
|
||||
|
||||
@ -137,7 +135,10 @@ setTitleOnThumbnail = function($thumb) {
|
||||
* mouse over/out functions, etc.
|
||||
*/
|
||||
setEventsOnThumbnail = function($thumb) {
|
||||
//console.log("== Setting event on thumbnail," ,$thumb);
|
||||
|
||||
// Note: use ceil() so it jumps to a part of the video that actually is showing
|
||||
// this slide, while floor() would most likely jump to the previously slide
|
||||
|
||||
// Popcorn event to mark a thumbnail when its slide is being shown
|
||||
var timeIn = $thumb.attr("data-in");
|
||||
var timeOut = $thumb.attr("data-out");
|
||||
@ -145,65 +146,45 @@ setEventsOnThumbnail = function($thumb) {
|
||||
pop.code({
|
||||
start: timeIn,
|
||||
end: timeOut,
|
||||
onStart: function( options ) {
|
||||
$parent = $("#thumbnail-" + options.start).parent();
|
||||
onStart: function(options) {
|
||||
$parent = $(".thumbnail-wrapper").removeClass("active");
|
||||
$parent = $("#thumbnail-" + Math.ceil(options.start)).parent();
|
||||
$parent.addClass("active");
|
||||
$(".thumbnail-label", $parent).show();
|
||||
|
||||
animateToCurrentSlide();
|
||||
},
|
||||
onEnd: function( options ) {
|
||||
$parent = $("#thumbnail-" + options.start).parent();
|
||||
onEnd: function(options) {
|
||||
$parent = $("#thumbnail-" + Math.ceil(options.start)).parent();
|
||||
$parent.removeClass("active");
|
||||
$(".thumbnail-label", $parent).hide();
|
||||
}
|
||||
});
|
||||
|
||||
// Click on thumbnail changes the slide in popcorn
|
||||
$thumb.parent().on("click", function() {
|
||||
goToSlide($thumb.attr("data-in"));
|
||||
replaceTimeOnUrl($thumb.attr("data-in"));
|
||||
var time = Math.ceil($thumb.attr("data-in"));
|
||||
goToSlide(time);
|
||||
replaceTimeOnUrl(time);
|
||||
});
|
||||
|
||||
// Mouse over/out to show/hide the label over the thumbnail
|
||||
$wrapper = $thumb.parent();
|
||||
$wrapper.on("mouseover", function() {
|
||||
$(".thumbnail-label", $(this)).show();
|
||||
$(this).addClass("hovered");
|
||||
});
|
||||
$wrapper.on("mouseout", function() {
|
||||
if (!$(this).hasClass("active")) {
|
||||
$(".thumbnail-label", $(this)).hide();
|
||||
}
|
||||
$(this).removeClass("hovered");
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
$("input[name='autoscrollEnabled']").live('change', function() {
|
||||
animateToCurrentSlide();
|
||||
});
|
||||
var animateToCurrentSlide = function() {
|
||||
var $container = $("#thumbnails").parents(".left-off-canvas-menu");
|
||||
|
||||
animateToCurrentSlide = function(force) {
|
||||
console.log("==Animating to current slide");
|
||||
force = typeof force !== 'undefined' ? force : false;
|
||||
|
||||
if (force || isAutoscrollEnabled()) {
|
||||
var currentSlide = getCurrentSlide();
|
||||
// animate the scroll of thumbnails to center the current slide
|
||||
var thumbnailOffset = currentSlide.prop('offsetTop') - $("#thumbnails").prop('offsetTop') + (currentSlide.prop('offsetHeight') - $("#thumbnails").prop('offsetHeight')) / 2;
|
||||
$("#thumbnails").animate({ scrollTop: thumbnailOffset }, 'slow');
|
||||
}
|
||||
}
|
||||
|
||||
isAutoscrollEnabled = function() {
|
||||
return $("input[name='autoscrollEnabled']").is(':checked');
|
||||
}
|
||||
|
||||
setAutoscrollEnabled = function(value) {
|
||||
$('input[name=autoscrollEnabled]').attr('checked', value);
|
||||
}
|
||||
|
||||
getCurrentSlide = function() {
|
||||
return $(".thumbnail-wrapper.active");
|
||||
}
|
||||
var currentThumb = $(".thumbnail-wrapper.active");
|
||||
// animate the scroll of thumbnails to center the current slide
|
||||
var thumbnailOffset = currentThumb.prop('offsetTop') - $container.prop('offsetTop') +
|
||||
(currentThumb.prop('offsetHeight') - $container.prop('offsetHeight')) / 2;
|
||||
$container.stop();
|
||||
$container.animate({ scrollTop: thumbnailOffset }, 200);
|
||||
};
|
||||
|
||||
/*
|
||||
* Generates the list of thumbnails using shapes.svg
|
||||
@ -218,7 +199,7 @@ generateThumbnails = function() {
|
||||
}
|
||||
xmlhttp.open("GET", SHAPES_SVG, false);
|
||||
xmlhttp.send(null);
|
||||
|
||||
|
||||
if (xmlhttp.responseXML)
|
||||
var xmlDoc = xmlhttp.responseXML;
|
||||
else {
|
||||
@ -228,14 +209,14 @@ generateThumbnails = function() {
|
||||
|
||||
var elementsMap = {};
|
||||
var imagesList = new Array();
|
||||
|
||||
|
||||
xmlList = xmlDoc.getElementsByTagName("image");
|
||||
var slideCount = 0;
|
||||
|
||||
|
||||
console.log("== Setting title on thumbnails");
|
||||
for (var i = 0; i < xmlList.length; i++) {
|
||||
var element = xmlList[i];
|
||||
|
||||
|
||||
if (!$(element).attr("xlink:href"))
|
||||
continue;
|
||||
var src = RECORDINGS + "/" + element.getAttribute("xlink:href");
|
||||
@ -243,9 +224,10 @@ generateThumbnails = function() {
|
||||
var timeInList = xmlList[i].getAttribute("in").split(" ");
|
||||
var timeOutList = xmlList[i].getAttribute("out").split(" ");
|
||||
for (var j = 0; j < timeInList.length; j++) {
|
||||
var timeIn = Math.floor(timeInList[j]);
|
||||
var timeOut = Math.floor(timeOutList[j]);
|
||||
|
||||
|
||||
var timeIn = Math.ceil(timeInList[j]);
|
||||
var timeOut = Math.ceil(timeOutList[j]);
|
||||
|
||||
var img = $(document.createElement('img'));
|
||||
img.attr("src", src);
|
||||
img.attr("id", "thumbnail-" + timeIn);
|
||||
@ -270,19 +252,18 @@ generateThumbnails = function() {
|
||||
var div = $(document.createElement('div'));
|
||||
div.addClass("thumbnail-wrapper");
|
||||
div.attr("role", "link"); //tells accessibility software it can be clicked
|
||||
div.attr("aria-describedby", img.attr("id") + "description");
|
||||
div.attr("aria-describedby", img.attr("id") + "description");
|
||||
div.append(img);
|
||||
div.append(label);
|
||||
div.append(hiddenDesc);
|
||||
|
||||
if (parseFloat(timeIn) == 0 ) {
|
||||
if (parseFloat(timeIn) == 0) {
|
||||
div.addClass("active");
|
||||
$(".thumbnail-label", div).show();
|
||||
}
|
||||
|
||||
imagesList.push(timeIn);
|
||||
elementsMap[timeIn] = div;
|
||||
|
||||
|
||||
setEventsOnThumbnail(img);
|
||||
setTitleOnThumbnail(img);
|
||||
}
|
||||
@ -307,26 +288,26 @@ google_frame_warning = function(){
|
||||
document.getElementById("chat").appendChild(line);
|
||||
document.getElementById("chat").appendChild(link);
|
||||
}
|
||||
|
||||
|
||||
function checkUrl(url)
|
||||
{
|
||||
console.log("==Checking Url",url)
|
||||
var http = new XMLHttpRequest();
|
||||
http.open('HEAD', url, false);
|
||||
try {
|
||||
http.send();
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
return http.status==200;
|
||||
console.log("==Checking Url",url);
|
||||
var http = new XMLHttpRequest();
|
||||
http.open('HEAD', url, false);
|
||||
try {
|
||||
http.send();
|
||||
} catch(e) {
|
||||
return false;
|
||||
}
|
||||
return http.status==200;
|
||||
}
|
||||
|
||||
load_video = function(){
|
||||
console.log("==Loading video")
|
||||
//document.getElementById("video").style.visibility = "hidden"
|
||||
var video = document.createElement("video")
|
||||
video.setAttribute('id','video');
|
||||
video.setAttribute('class','webcam');
|
||||
console.log("==Loading video");
|
||||
//document.getElementById("video").style.visibility = "hidden"
|
||||
var video = document.createElement("video");
|
||||
video.setAttribute('id','video');
|
||||
video.setAttribute('class','webcam');
|
||||
|
||||
var webmsource = document.createElement("source");
|
||||
webmsource.setAttribute('src', RECORDINGS + '/video/webcams.webm');
|
||||
@ -339,13 +320,13 @@ load_video = function(){
|
||||
pc_webcam.currentTime( this.currentTime() );
|
||||
});*/
|
||||
|
||||
video.setAttribute('data-timeline-sources', SLIDES_XML);
|
||||
video.setAttribute('data-timeline-sources', SLIDES_XML);
|
||||
//video.setAttribute('controls','');
|
||||
//leave auto play turned off for accessiblity support
|
||||
//video.setAttribute('autoplay','autoplay');
|
||||
|
||||
document.getElementById("videoRecordingWrapper").appendChild(video);
|
||||
}
|
||||
document.getElementById("video-area").appendChild(video);
|
||||
}
|
||||
|
||||
load_audio = function() {
|
||||
console.log("Loading audio")
|
||||
@ -377,7 +358,7 @@ load_audio = function() {
|
||||
//audio.setAttribute('controls','');
|
||||
//leave auto play turned off for accessiblity support
|
||||
//audio.setAttribute('autoplay','autoplay');
|
||||
document.getElementById("audioRecordingWrapper").appendChild(audio);
|
||||
document.getElementById("audio-area").appendChild(audio);
|
||||
}
|
||||
|
||||
load_script = function(file){
|
||||
@ -410,47 +391,44 @@ load_spinner = function(){
|
||||
};
|
||||
var target = document.getElementById('spinner');
|
||||
spinner = new Spinner(opts).spin(target);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
document.addEventListener( "DOMContentLoaded", function() {
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
console.log("==DOM content loaded");
|
||||
var appName = navigator.appName;
|
||||
var appVersion = navigator.appVersion;
|
||||
var spinner;
|
||||
//var video = document.getElementById("webcam");
|
||||
|
||||
if (appName == "Microsoft Internet Explorer" && navigator.userAgent.match("chromeframe") == false ) {
|
||||
google_frame_warning
|
||||
google_frame_warning();
|
||||
}
|
||||
|
||||
if (checkUrl(RECORDINGS + '/video/webcams.webm') == true){
|
||||
videoContainer = document.getElementById("audioRecordingWrapper").style.display = "none";
|
||||
load_video();
|
||||
}else{
|
||||
videoContainer = document.getElementById("videoRecordingWrapper").style.display = "none";
|
||||
chat = document.getElementById("chat");
|
||||
chat.style.height = "600px";
|
||||
chat.style.backgroundColor = "white";
|
||||
load_audio();
|
||||
if (checkUrl(RECORDINGS + '/video/webcams.webm') == true) {
|
||||
hasVideo = true;
|
||||
$("#audio-area").attr("style", "display:none;");
|
||||
load_video();
|
||||
} else {
|
||||
hasVideo = false;
|
||||
$("#video-area").attr("style", "display:none;");
|
||||
load_audio();
|
||||
}
|
||||
|
||||
|
||||
load_spinner();
|
||||
console.log("==Hide playback content");
|
||||
$("#playback-content").css('visibility', 'hidden');
|
||||
//load_audio();
|
||||
load_script("playback/lib/writing.js");
|
||||
//generateThumbnails();
|
||||
|
||||
//load up the acorn controls
|
||||
console.log("==Loading acorn media player ");
|
||||
jQuery('#video').acornMediaPlayer({
|
||||
theme: 'darkglass',
|
||||
$('#video').acornMediaPlayer({
|
||||
theme: 'bigbluebutton',
|
||||
volumeSlider: 'vertical'
|
||||
});
|
||||
|
||||
|
||||
$('#video').on("swap", function() {
|
||||
swapVideoPresentation();
|
||||
});
|
||||
|
||||
resizeComponents();
|
||||
}, false);
|
||||
|
||||
var secondsToWait = 0;
|
||||
@ -470,8 +448,112 @@ function Tick() {
|
||||
$('#countdown').html(""); // remove the timer
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
secondsToWait -= 1;
|
||||
$('#countdown').html(secondsToWait);
|
||||
window.setTimeout("Tick()", 1000);
|
||||
}
|
||||
|
||||
// Swap the position of the DOM elements `elm1` and `elm2`.
|
||||
function swapElements(elm1, elm2) {
|
||||
var parent1, next1,
|
||||
parent2, next2;
|
||||
|
||||
parent1 = elm1.parentNode;
|
||||
next1 = elm1.nextSibling;
|
||||
parent2 = elm2.parentNode;
|
||||
next2 = elm2.nextSibling;
|
||||
|
||||
parent1.insertBefore(elm2, next1);
|
||||
parent2.insertBefore(elm1, next2);
|
||||
}
|
||||
|
||||
// Swaps the positions of the presentation and the video
|
||||
function swapVideoPresentation() {
|
||||
var pop = Popcorn("#video");
|
||||
var wasPaused = pop.paused();
|
||||
|
||||
var mainSectionChild = $("#main-section").children("[data-swap]");
|
||||
var sideSectionChild = $("#side-section").children("[data-swap]");
|
||||
swapElements(mainSectionChild[0], sideSectionChild[0]);
|
||||
resizeComponents();
|
||||
|
||||
if (!wasPaused) {
|
||||
pop.play();
|
||||
}
|
||||
|
||||
// hide the cursor so it doesn't appear in the wrong place (e.g. on top of the video)
|
||||
// if the cursor is currently being useful, he we'll be redrawn automatically soon
|
||||
showCursor(false);
|
||||
|
||||
// wait for the svg with the slides to be fully loaded and then set the current image
|
||||
// as visible.
|
||||
function checkSVGLoaded() {
|
||||
var done = false;
|
||||
var svg = document.getElementsByTagName("object")[0];
|
||||
if (svg !== undefined && svg !== null && currentImage && svg.getSVGDocument('svgfile')) {
|
||||
var img = svg.getSVGDocument('svgfile').getElementById(currentImage.getAttribute("id"));
|
||||
if (img !== undefined && img !== null) {
|
||||
img.style.visibility = "visible";
|
||||
resizeSlides();
|
||||
done = true;
|
||||
}
|
||||
}
|
||||
if (!done) {
|
||||
setTimeout(checkSVGLoaded, 50);
|
||||
}
|
||||
}
|
||||
checkSVGLoaded();
|
||||
}
|
||||
|
||||
// Manually resize some components we can't properly resize just using css.
|
||||
// Mostly the components in the side-section, that has more than one component that
|
||||
// need to fill 100% height.
|
||||
function resizeComponents() {
|
||||
var availableHeight = $("body").height();
|
||||
if (hasVideo) {
|
||||
availableHeight -= $("#video-area .acorn-controls").outerHeight(true);
|
||||
} else {
|
||||
availableHeight -= $("#audio-area .acorn-controls").outerHeight(true);
|
||||
}
|
||||
availableHeight -= $("#navbar").outerHeight(true); // navbar
|
||||
|
||||
// portrait mode
|
||||
if (window.innerHeight > window.innerWidth) {
|
||||
var height = availableHeight * 0.6; // 60% for top bar
|
||||
$("#main-section").outerHeight(height);
|
||||
availableHeight -= height;
|
||||
$("#side-section").outerHeight(availableHeight);
|
||||
|
||||
var chatHeight = availableHeight;
|
||||
$("#chat-area").innerHeight(chatHeight);
|
||||
} else {
|
||||
// $("#playback-row").outerHeight(availableHeight);
|
||||
$("#main-section").outerHeight(availableHeight);
|
||||
$("#side-section").outerHeight(availableHeight);
|
||||
|
||||
var chatHeight = availableHeight;
|
||||
chatHeight -= $("#side-section").children("[data-swap]").outerHeight(true);
|
||||
$("#chat-area").innerHeight(chatHeight);
|
||||
}
|
||||
}
|
||||
|
||||
// Need to resize the elements in a few occasions:
|
||||
// * Once the page and all assets are fully loaded
|
||||
// * When the page is resized
|
||||
// * When the video is fully loaded
|
||||
$(window).resize(function() {
|
||||
resizeComponents();
|
||||
});
|
||||
document.addEventListener("load", function() {
|
||||
resizeComponents();
|
||||
}, false);
|
||||
function checkVideoLoaded() {
|
||||
var video = $('#video')[0];
|
||||
if (video !== undefined && video !== null && video.readyState === 4) {
|
||||
resizeComponents();
|
||||
} else {
|
||||
setTimeout(checkVideoLoaded, 50);
|
||||
}
|
||||
}
|
||||
checkVideoLoaded();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user