yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updates forms video player js + css

Browse Source
This commit is contained in:
per ploug
2014-10-27 11:55:46 +01:00
parent 4bb0f41ead
commit e9e83d3958
2 changed files with 208 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/Umbraco.Web.UI.Client/src/less/dashboards.less
View File

@@ -19,15 +19,85 @@
height: 4px;
}
.video_player video {
width: 100%;
max-width: 640px;
border: 1px solid #ededed;
border-left: none;
border-bottom: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
.video_player{
video {
width: 100%;
max-width: 640px;
border: 1px solid #ededed;
border-left: none;
border-bottom: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
}
input[type="range"] {
position: relative;
z-index: 999;
max-width: 640px;
width: 100%;
margin: 0 auto;
opacity: 0;
cursor: pointer;
}
input[type="range"]::-ms-fill-lower, input[type="range"]::-ms-fill-upper {
background: transparent;
}
input[type="range"]::-ms-tooltip {
display: none;
}
.video-controls {
position: relative;
max-width: 640px;
height: 20px;
margin: -13px auto 40px;
opacity: .8;
}
.loader {
display: block;
width: 100%;
height: 3px;
margin-top: -13px;
background-color: whitesmoke;
}
.progress-bar {
display: block;
box-sizing: border-box;
-moz-box-sizing:border-box;
max-width: 100%;
width: 200px;
height: 100%;
background: #7c7e80;
}
.video-controls, .loader, .progress-bar {
-webkit-transition: all 150ms ease-in-out;
transition: all 150ms ease-in-out;
}
.progress-bar {
transition-property: background;
}
.video_player video:hover + .video-controls, .video-controls:hover {
margin-top: -19px;
margin-bottom: 46px;
opacity: 1;
}
.video_player video:hover + .video-controls .loader, .video-controls:hover .loader {
height: 8px;
}
.video_player video:hover + .video-controls .progress-bar, .video-controls:hover .progress-bar {
background: #2e99f4;
}
}
.installer-top {
overflow: hidden;

130
src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js
View File

@@ -43,13 +43,141 @@ function FormsController($scope, $route, packageResource) {
};
$scope.complete = function(result){
window.location.reload();
var urL = window.location.href + "?init=true";
window.location.href = url;
//window.location.reload();
};
$scope.error = function(err){
$scope.state = undefined;
$scope.error = err;
};
function Video_player (videoId) {
// Get dom elements
this.container = document.getElementById(videoId);
this.video = this.container.getElementsByTagName('video')[0];
//Create controls
this.controls = document.createElement('div');
this.controls.className="video-controls";
this.seek_bar = document.createElement('input');
this.seek_bar.className="seek-bar";
this.seek_bar.type="range";
this.seek_bar.setAttribute('value', '0');
this.loader = document.createElement('div');
this.loader.className="loader";
this.progress_bar = document.createElement('span');
this.progress_bar.className="progress-bar";
// Insert controls
this.controls.appendChild(this.seek_bar);
this.container.appendChild(this.controls);
this.controls.appendChild(this.loader);
this.loader.appendChild(this.progress_bar);
}
Video_player.prototype
.seeking = function() {
// get the value of the seekbar (hidden input[type="range"])
var time = this.video.duration * (this.seek_bar.value / 100);
// Update video to seekbar value
this.video.currentTime = time;
};
// Stop video when user initiates seeking
Video_player.prototype
.start_seek = function() {
this.video.pause();
};
// Start video when user stops seeking
Video_player.prototype
.stop_seek = function() {
this.video.play();
};
// Update the progressbar (span.loader) according to video.currentTime
Video_player.prototype
.update_progress_bar = function() {
// Get video progress in %
var value = (100 / this.video.duration) * this.video.currentTime;
// Update progressbar
this.progress_bar.style.width = value + '%';
};
// Bind progressbar to mouse when seeking
Video_player.prototype
.handle_mouse_move = function(event) {
// Get position of progressbar relative to browser window
var pos = this.progress_bar.getBoundingClientRect().left;
// Make sure event is reckonized cross-browser
event = event || window.event;
// Update progressbar
this.progress_bar.style.width = (event.clientX - pos) + "px";
};
// Eventlisteners for seeking
Video_player.prototype
.video_event_handler = function(videoPlayer, interval) {
// Update the progress bar
var animate_progress_bar = setInterval(function () {
videoPlayer.update_progress_bar();
}, interval);
// Fire when input value changes (user seeking)
videoPlayer.seek_bar
.addEventListener("change", function() {
videoPlayer.seeking();
});
// Fire when user clicks on seekbar
videoPlayer.seek_bar
.addEventListener("mousedown", function (clickEvent) {
// Pause video playback
videoPlayer.start_seek();
// Stop updating progressbar according to video progress
clearInterval(animate_progress_bar);
// Update progressbar to where user clicks
videoPlayer.handle_mouse_move(clickEvent);
// Bind progressbar to cursor
window.onmousemove = function(moveEvent){
videoPlayer.handle_mouse_move(moveEvent);
};
});
// Fire when user releases seekbar
videoPlayer.seek_bar
.addEventListener("mouseup", function () {
// Unbind progressbar from cursor
window.onmousemove = null;
// Start video playback
videoPlayer.stop_seek();
// Animate the progressbar
animate_progress_bar = setInterval(function () {
videoPlayer.update_progress_bar();
}, interval);
});
};
var videoPlayer = new Video_player('video_1');
videoPlayer.video_event_handler(videoPlayer, 17);
}
angular.module("umbraco").controller("Umbraco.Dashboard.FormsDashboardController", FormsController);