--- a/integration/css/edition.css Thu Oct 25 16:55:24 2012 +0200
+++ b/integration/css/edition.css Thu Oct 25 18:52:44 2012 +0200
@@ -550,7 +550,7 @@
.video{
width: 460px;
- height: 345px;
+ height: 300px;
position: relative;
margin-bottom: 8px;
background: #333333;
@@ -572,3 +572,171 @@
a.publier-button.disable:hover{
background-color: none;
}
+
+.widget {
+ position: relative;
+}
+
+/* Styles from Metadataplayer */
+
+/* Slider Widget */
+
+.Ldt-Slider {
+ border: none; border-radius: 0; padding: 0; margin: 0; background: #B6B8B8;
+}
+
+.Ldt-Slider .ui-slider-handle {
+ border-radius: 8px; top: -2px; background: #fc00ff; border: 1px solid #ffffff;
+}
+
+.Ldt-Slider .ui-slider-range {
+ background: #747474;
+}
+
+.Ldt-Slider-Time {
+ position: absolute; top: -16px; background: #ffffc0; color: #000000; border-radius: 3px; z-index: 8;
+ font-size: 10px; width: 34px; border: 1px solid #999999; padding: 1px; margin-left: -20px;
+ display: none; text-align: center; font-weight: bold;
+}
+
+/* Controller Widget */
+
+.Ldt-Ctrl {
+ font-size: 10px;
+ background:url('../img/player_gradient.png') repeat-x transparent ;
+ height: 25px;
+ border: 1px solid #b6b8b8;
+ position: relative;
+}
+
+.Ldt-Ctrl-Left {
+ float:left; width: 300px;
+}
+
+.Ldt-Ctrl-Right {
+ float: right;
+}
+
+.Ldt-Ctrl-button {
+ float: left;
+ width: 30px; height: 25px;
+ background: url('../img/player-sprites.png');
+ cursor: pointer;
+}
+
+.Ldt-Ctrl-spacer {
+ float: left; width: 1px; height: 25px; background: #b6b8b8;
+}
+
+.Ldt-Ctrl-Play {
+ margin: 0 15px;
+}
+
+.Ldt-Ctrl-Play-PlayState {
+ background-position: 0 0;
+}
+
+.Ldt-Ctrl-Play-PlayState:hover {
+ background-position: 0 -25px;
+}
+
+.Ldt-Ctrl-Play-PlayState:active {
+ background-position: 0 -50px;
+}
+
+.Ldt-Ctrl-Play-PauseState {
+ background-position: -30px 0;
+}
+
+.Ldt-Ctrl-Play-PauseState:hover {
+ background-position: -30px -25px;
+}
+
+.Ldt-Ctrl-Play-PauseState:active {
+ background-position: -30px -50px;
+}
+
+.Ldt-Ctrl-Time {
+ float: left;
+ margin: 5px;
+ font-size: 12px;
+ font-family: Arial, Verdana, sans-serif;
+}
+
+.Ldt-Ctrl-Time-Elapsed {
+ float: left;
+ color: #4a4a4a;
+}
+
+.Ldt-Ctrl-Time-Separator {
+ margin: 0 4px;
+ float: left;
+}
+
+.Ldt-Ctrl-Time-Total {
+ float: left;
+ color: #b2b2b2;
+}
+
+.Ldt-Ctrl-Sound {
+ margin: 0 2px;
+}
+
+.Ldt-Ctrl-Sound-Full {
+ background-position: -120px 0;
+}
+
+.Ldt-Ctrl-Sound-Full:hover {
+ background-position: -120px -25px;
+}
+
+.Ldt-Ctrl-Sound-Full:active {
+ background-position: -120px -50px;
+}
+
+.Ldt-Ctrl-Sound-Mute {
+ background-position: -150px 0;
+}
+
+.Ldt-Ctrl-Sound-Mute:hover {
+ background-position: -150px -25px;
+}
+
+.Ldt-Ctrl-Sound-Mute:active {
+ background-position: -150px -50px;
+}
+
+.Ldt-Ctrl-Sound-Half {
+ background-position: -180px 0;
+}
+
+.Ldt-Ctrl-Sound-Half:hover {
+ background-position: -180px -25px;
+}
+
+.Ldt-Ctrl-Sound-Half:active {
+ background-position: -180px -50px;
+}
+
+.Ldt-Ctrl-Volume-Control {
+ display: none;
+ position: absolute;
+ background:url('../img/player_gradient.png') repeat-x transparent ;
+ height: 25px;
+ width: 100px; top: 25px; right: -1px; z-index: 100;
+ padding: 0 2px;
+ border: 1px solid #b6b8b8;
+}
+
+.Ldt-Ctrl-Volume-Bar {
+ height: 5px; margin: 9px 3px 0; background: #cccccc; border: 1px solid #999999; border-radius: 2px;
+}
+
+.Ldt-Ctrl-Volume-Control .ui-slider-handle {
+ width: 6px; height: 19px; background: #a8a8a8; border: 1px solid #999999; border-radius: 2px; top: -8px; margin-left: -4px;
+ cursor: pointer;
+}
+
+.Ldt-Ctrl-Volume-Control:hover .ui-slider-handle {
+ background: #F7268E;
+}
\ No newline at end of file
--- a/integration/edition.html Thu Oct 25 16:55:24 2012 +0200
+++ b/integration/edition.html Thu Oct 25 18:52:44 2012 +0200
@@ -7,10 +7,10 @@
<meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
<meta name="author" content="Anthony Ly, Raphaël Velt" />
<title>Hashcut > Edition</title>
+ <link rel="stylesheet" href="lib/jquery-ui.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/edition.css" />
- <link rel="stylesheet" href="lib/jquery-ui.css">
</head>
<body>
<div class="wrap">
@@ -153,6 +153,31 @@
<a class="publier-button" title="Publier" href="#"></a>
</div>
+ <div class="widget">
+ <div class="Ldt-Slider"></div>
+ <div class="Ldt-Slider-Time">00:00</div>
+
+ <div class="Ldt-Ctrl">
+ <div class="Ldt-Ctrl-Left">
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-Play Ldt-Ctrl-Play-PlayState" title="Lecture/Pause"></div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ </div>
+ <div class="Ldt-Ctrl-Right">
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-Time">
+ <div class="Ldt-Ctrl-Time-Elapsed" title="Temps écoulé">00:00</div>
+ <div class="Ldt-Ctrl-Time-Separator">/</div>
+ <div class="Ldt-Ctrl-Time-Total" title="Temps total">00:00</div>
+ </div>
+ <div class="Ldt-Ctrl-spacer"></div>
+ <div class="Ldt-Ctrl-button Ldt-Ctrl-Sound Ldt-Ctrl-Sound-Full Ldt-TraceMe" title="Couper/Activer le son"></div>
+ </div>
+ <div class="Ldt-Ctrl-Volume-Control" title="Changer le volume">
+ <div class="Ldt-Ctrl-Volume-Bar"></div>
+ </div>
+ </div>
+ </div>
+
<div class="bloc-segmentation">
<div class="segment">
<img src="img/visuel-segment.png" alt="">
--- a/integration/home.html Thu Oct 25 16:55:24 2012 +0200
+++ b/integration/home.html Thu Oct 25 18:52:44 2012 +0200
@@ -6,10 +6,10 @@
<meta name="copyright" content="Institut de Recherche et d'Innovation (IRI), 2012" />
<meta name="author" content="Anthony Ly, Raphaël Velt" />
<title>Hashcut > Home</title>
+ <link rel="stylesheet" href="lib/jquery-ui.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/home.css" />
- <link rel="stylesheet" href="lib/jquery-ui.css">
</head>
<body>
<div class="wrap">
Binary file integration/img/player-sprites.png has changed
Binary file integration/img/player_gradient.png has changed
Binary file integration/img/visuel-player.jpg has changed
--- a/integration/js/editor.js Thu Oct 25 16:55:24 2012 +0200
+++ b/integration/js/editor.js Thu Oct 25 18:52:44 2012 +0200
@@ -1,83 +1,234 @@
-(function() {
- var Hashcut = function() {
- var directory = new IriSP.Model.Directory(),
- project = directory.remoteSource({
- url: "data/bpidata.json",
- serializer: IriSP.serializers.medialist
- }),
- mediatemplate = '<li class="item-video"><img src="{{thumbnail}}" alt="{{title}}" />'
- + '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>'
- + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>';
- project.onLoad(function() {
- var html = '';
- project.getMedias().forEach(function(_m) {
- html += Mustache.to_html(mediatemplate, _m);
- });
- $(".col-left .list-video").html(html);
+IriSP.Hashcut = function() {
+
+ /* Load Media List */
+
+ var directory = new IriSP.Model.Directory(),
+ project = directory.remoteSource({
+ url: "data/bpidata.json",
+ serializer: IriSP.serializers.medialist
+ }),
+ mediatemplate = '<li class="item-video" data-media-id="{{id}}"><img src="{{thumbnail}}" alt="{{title}}" />'
+ + '<span class="video-info"><span class="title-video">{{title}}</span><span class="author">{{description}}</span>'
+ + '<span class="time-length">Durée : <span>{{duration}}</span></span></span></li>';
+
+ /* Fill left column with Media List */
+
+ project.onLoad(function() {
+ var html = '';
+ project.getMedias().forEach(function(_m) {
+ html += Mustache.to_html(mediatemplate, _m);
});
-
- $(".col-left input").on("keyup change input paste", function() {
- var val = $(this).val();
- if (val) {
- var find = IriSP.Model.regexpFromTextOrArray(val, true),
- replace = IriSP.Model.regexpFromTextOrArray(val, false);
- }
- $(".col-left .item-video").each(function() {
- var li = $(this),
- title = $(this).find(".title-video"),
- titletext = title.text();
- if (val && find.test(titletext)) {
- title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>'));
- li.show();
+ $(".col-left .list-video").html(html);
+ });
+
+ /* Search Media with left column form */
+
+ $(".col-left input").on("keyup change input paste", function() {
+ var val = $(this).val();
+ if (val) {
+ var find = IriSP.Model.regexpFromTextOrArray(val, true),
+ replace = IriSP.Model.regexpFromTextOrArray(val, false);
+ }
+ $(".col-left .item-video").each(function() {
+ var li = $(this),
+ title = $(this).find(".title-video"),
+ titletext = title.text();
+ if (val && find.test(titletext)) {
+ title.html(titletext.replace(replace, '<span style="background: yellow;">$1</span>'));
+ li.show();
+ } else {
+ title.text(titletext);
+ if (val) {
+ li.hide();
} else {
- title.text(titletext);
- if (val) {
- li.hide();
- } else {
- li.show();
- }
+ li.show();
}
- })
- });
-
- $(".tab-segment").click(function() {
- $(".col-middle").removeClass("empty-mode pvw-mode").addClass("segment-mode");
- return false;
- });
- $(".tab-pvw").click(function() {
- $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
- return false;
+ }
+ })
+ });
+
+ /* Slider */
+
+ var timeSlider = $(".Ldt-Slider");
+ timeSlider.slider({
+ range: "min",
+ value: 0,
+ min: 0,
+ max: 920,
+ slide: function(event, ui) {
+ console.log(ui.value);
+ //TODO: Slide to correct Timecode
+ }
+ });
+
+ var timeSliderHandle = timeSlider.find('.ui-slider-handle'),
+ timeSliderMaximized = false,
+ timeSliderTimeoutId = false,
+ timeSliderMinimizedHeight = 4,
+ timeSliderMaximizedHeight = 10,
+ timeSliderTimeoutDuration = 1500,
+ timeTooltip = $(".Ldt-Slider-Time");
+
+ timeSlider.css(calculateSliderCss(timeSliderMinimizedHeight));
+ timeSliderHandle.css(calculateHandleCss(timeSliderMinimizedHeight));
+
+ function timeSliderMouseOver() {
+ if (timeSliderTimeoutId) {
+ window.clearTimeout(timeSliderTimeoutId);
+ timeSliderTimeoutId = false;
+ }
+ if (!timeSliderMaximized) {
+ timeSliderAnimateToHeight(timeSliderMaximizedHeight);
+ timeSliderMaximized = true;
+ }
+ }
+
+ function timeSliderMouseOut() {
+ timeTooltip.hide();
+ if (timeSliderTimeoutId) {
+ clearTimeout(timeSliderTimeoutId);
+ timeSliderTimeoutId = false;
+ }
+ timeSliderTimeoutId = setTimeout(function() {
+ if (timeSliderMaximized) {
+ timeSliderAnimateToHeight(timeSliderMinimizedHeight);
+ timeSliderMaximized = false;
+ }
+ timeSliderTimeoutId = false;
+ }, timeSliderTimeoutDuration);
+ }
+
+ timeSlider
+ .mouseover(function() {
+ timeTooltip.show();
+ timeSliderMouseOver();
+ })
+ .mouseout(timeSliderMouseOut)
+ .mousemove(function(_e) {
+ var _x = _e.pageX - timeSlider.offset().left,
+ _t = new IriSP.Model.Time(); // _this.media.duration * _x / _this.width
+ timeTooltip.text(_t.toString()).css("left",_x);
});
-
- function disableMoveItemVideo() {
- $(".organize-segments .top, .organize-segments .bottom").removeClass("disable");
- $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable");
+
+ $(".Ldt-Ctrl").mouseover(timeSliderMouseOver).mouseout(timeSliderMouseOut);
+
+ function timeSliderAnimateToHeight(_height) {
+ timeSlider.stop().animate(
+ calculateSliderCss(_height),
+ 500,
+ function() {
+ IriSP.jQuery(this).css("overflow","visible");
+ });
+ timeSliderHandle.stop().animate(
+ calculateHandleCss(_height),
+ 500,
+ function() {
+ IriSP.jQuery(this).css("overflow","visible");
+ });
+ }
+
+ function calculateSliderCss(_size) {
+ return {
+ height: _size + "px",
+ "margin-top": (timeSliderMinimizedHeight - _size) + "px"
+ };
+ }
+
+ function calculateHandleCss(_size) {
+ return {
+ height: (2 + _size) + "px",
+ width: (2 + _size) + "px",
+ "margin-left": -Math.ceil(2 + _size / 2) + "px"
}
-
- $(".organize-segments").sortable({
- stop : function(){
- disableMoveItemVideo();
- }
+ }
+
+ /* Controller Widget */
+
+ var volBlock = $(".Ldt-Ctrl-Volume-Control");
+ $('.Ldt-Ctrl-Sound')
+ .click(function(){}) //TODO: Add Mute Handler
+ .mouseover(function() {
+ volBlock.show();
+ })
+ .mouseout(function() {
+ volBlock.hide();
});
-
- $(".organize-segments .top").click(function(e){
- var currentItem = $(this).parents(".item-video");
- currentItem.insertBefore(currentItem.prev());
- disableMoveItemVideo();
- });
-
- $(".organize-segments .bottom").click(function(e){
- var currentItem = $(this).parents(".item-video");
- currentItem.insertAfter(currentItem.next());
- disableMoveItemVideo();
- });
-
+ volBlock.mouseover(function() {
+ volBlock.show();
+ }).mouseout(function() {
+ volBlock.hide();
+ });
+
+ var volBar = $(".Ldt-Ctrl-Volume-Bar");
+ volBar.slider({
+ slide: function(event, ui) {
+ volBar.attr("title",'Volume : ' + ui.value + '%');
+ //_this.media.setVolume(ui.value / 100);
+ },
+ stop: function() {
+ // IriSP.Widgets.Controller.prototype.volumeUpdater
+ }
+ });
+
+ /* Set current Media */
+ var currentMedia;
+
+ function setMedia(mediaid) {
+ currentMedia = project.getElement(mediaid);
+ if (currentMedia.elementType == "media") {
+ $("video").hide();
+ var currentvideo = $('video[data-media-id="' + mediaid + '"]');
+ console.log(currentvideo);
+ }
+ }
+
+ function addMediaPlayer(media) {
}
+ /* Click on media items */
+
+ $(".col-left").on("click", ".item-video", function() {
+ setMedia($(this).attr("data-media-id"));
+ });
- IriSP.Hashcut = Hashcut;
+ /* Click on Tabs */
+
+ function showSegmentation() {
+ $(".col-middle").removeClass("empty-mode pvw-mode").addClass("segment-mode");
+ return false;
+ }
+ function showPreview() {
+ $(".col-middle").removeClass("empty-mode segment-mode").addClass("pvw-mode");
+ return false;
+ }
+
+ $(".tab-segment").click(showSegmentation);
+ $(".tab-pvw").click(showPreview);
+
+ function disableMoveItemVideo() {
+ $(".organize-segments .top, .organize-segments .bottom").removeClass("disable");
+ $(".organize-segments .item-video:last-child .bottom, .organize-segments .item-video:first-child .top").addClass("disable");
+ }
+
+ $(".organize-segments").sortable({
+ stop : function(){
+ disableMoveItemVideo();
+ }
+ });
+
+ $(".organize-segments .top").click(function(e){
+ var currentItem = $(this).parents(".item-video");
+ currentItem.insertBefore(currentItem.prev());
+ disableMoveItemVideo();
+ });
+
+ $(".organize-segments .bottom").click(function(e){
+ var currentItem = $(this).parents(".item-video");
+ currentItem.insertAfter(currentItem.next());
+ disableMoveItemVideo();
+ });
+
}
-)();
$(function() {
var hashcut = new IriSP.Hashcut();
