diff --git a/ui/video-control.reel/video-control-track.reel/video-control-track.css b/ui/video-control.reel/video-control-track.reel/video-control-track.css index 43fa068..3917f78 100644 --- a/ui/video-control.reel/video-control-track.reel/video-control-track.css +++ b/ui/video-control.reel/video-control-track.reel/video-control-track.css @@ -48,24 +48,19 @@ /* em value needs to be sorted out when the font size is more stable*/ margin: 0px .8em; border-radius: 10px; - background-color: hsla(0,0%,100%,.2); - - -webkit-transition: -webkit-transform .1s; - -moz-transition: -moz-transform .1s; - -ms-transition: -ms-transform .1s; - transition: transform .1s; } .digit-VideoControlTrack-timeline-progress { - background-color: hsla(0,0%,85%,.8); + position: absolute; height: inherit; border-radius: inherit; - -webkit-transform: translateX(-67%); - -moz-transform: translateX(-67%); - -ms-transform: translateX(-67%); - transform: translateX(-67%); + width: 100%; + display: flex; + flex: 1; + border: 0; } + .digit-VideoControlTrack-thumb { position: absolute; box-sizing: border-box; @@ -142,12 +137,23 @@ /* Light ------------------------------------ */ -[data-montage-skin="light"] .digit-VideoControlTrack-timeline { +[data-montage-skin="light"] .digit-VideoControlTrack-timeline-progress { background-color: hsla(0,0%,0%,.1); box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15), 0 1px 0 hsla(0,0%,100%,.5); + + color: hsla(0,0%,0%,.5); /*progress bar value IE*/ } -[data-montage-skin="light"] .digit-VideoControlTrack-timeline-progress { +[data-montage-skin="light"] .digit-VideoControlTrack-timeline-progress::-webkit-progress-bar { + background-color: hsla(0,0%,0%,.1); + box-shadow: inset 0 1px 1px hsla(0,0%,0%,.15), 0 1px 0 hsla(0,0%,100%,.5); +} + +[data-montage-skin="light"] .digit-VideoControlTrack-timeline-progress::-moz-progress-bar { + background-color: hsla(0,0%,0%,.5); +} + +[data-montage-skin="light"] .digit-VideoControlTrack-timeline-progress::-webkit-progress-value { background-color: hsla(0,0%,0%,.5); } diff --git a/ui/video-control.reel/video-control-track.reel/video-control-track.html b/ui/video-control.reel/video-control-track.reel/video-control-track.html index 5dfe658..4aad0e4 100644 --- a/ui/video-control.reel/video-control-track.reel/video-control-track.html +++ b/ui/video-control.reel/video-control-track.reel/video-control-track.html @@ -20,6 +20,16 @@ "bindings": { "value": {"<-": "@owner.formattedTime"} } + }, + "progressBar": { + "prototype": "ui/video-control.reel/video-control-track.reel[ProgressBar]", + "properties": { + "element": {"#": "progress-bar"} + }, + "bindings": { + "max": {"<-": "@owner.videoController.duration"}, + "value": {"<-": "@owner.videoController.position"} + } } } @@ -27,7 +37,7 @@
- +
-2:45
diff --git a/ui/video-control.reel/video-control-track.reel/video-control-track.js b/ui/video-control.reel/video-control-track.reel/video-control-track.js index 449163e..375844c 100644 --- a/ui/video-control.reel/video-control-track.reel/video-control-track.js +++ b/ui/video-control.reel/video-control-track.reel/video-control-track.js @@ -5,6 +5,7 @@ */ var Montage = require("montage").Montage; var AbstractSlider = require("montage/ui/base/abstract-slider").AbstractSlider; +var AbstractProgressBar = require("montage/ui/base/abstract-progress-bar").AbstractProgressBar; var Promise = require("montage/core/promise").Promise; /** @@ -50,7 +51,6 @@ exports.VideoControlTrack = Montage.create(AbstractSlider, /** @lends VideoContr handleThumbTranslate: { value: function (event) { AbstractSlider.handleThumbTranslate.apply(this, arguments); - } }, @@ -116,3 +116,8 @@ exports.VideoControlTrack = Montage.create(AbstractSlider, /** @lends VideoContr } }); + + +exports.ProgressBar = Montage.create(AbstractProgressBar, { + hasTemplate: {value: false} +});