From e9e83d3958e2cfe9f4733296d7478fbbb1088a78 Mon Sep 17 00:00:00 2001 From: per ploug Date: Mon, 27 Oct 2014 11:55:46 +0100 Subject: [PATCH] Updates forms video player js + css --- .../src/less/dashboards.less | 88 ++++++++++-- .../dashboard/dashboard.tabs.controller.js | 130 +++++++++++++++++- 2 files changed, 208 insertions(+), 10 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/dashboards.less b/src/Umbraco.Web.UI.Client/src/less/dashboards.less index e20525b0bc..3ecb9e3654 100644 --- a/src/Umbraco.Web.UI.Client/src/less/dashboards.less +++ b/src/Umbraco.Web.UI.Client/src/less/dashboards.less @@ -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; diff --git a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js index b32fc4e500..a09f7286cd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/dashboard/dashboard.tabs.controller.js @@ -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);