--- a/src/css/LdtPlayer.css Mon Feb 13 12:49:02 2012 +0100
+++ b/src/css/LdtPlayer.css Mon Feb 13 17:36:06 2012 +0100
@@ -110,13 +110,8 @@
font-size:12px;
}
-.Ldt-SaKeywords {
- background-color:#b9b9b9;
- color:#4D4D4D;
- padding:5px;
- font-weight:bold;
- text-align:left;
- float:left;
+.Ldt-SaKeywords {
+ font-weight:bold;
font-size:10px;
}
@@ -169,12 +164,20 @@
}
.Ldt-CtrlPlay {
- background:url('imgs/play_sprite.png') no-repeat transparent ;
+
background-position: 0 0;
width: 59px;
height: 25px;
}
+.Ldt-CtrlPlay-PlayState {
+ background:url('imgs/play_sprite.png') no-repeat transparent ;
+}
+
+.Ldt-CtrlPlay-PauseState {
+ background:url('imgs/pause_sprite.png') no-repeat transparent ;
+}
+
.Ldt-CtrlPlay:hover {
background-position: 0 -25px;
}
@@ -258,7 +261,6 @@
}
.Ldt-CtrlSound {
- background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
width: 33px;
height: 25px;
border-right: 1px solid #b6b8b8;
@@ -266,6 +268,14 @@
border-left: none;
}
+.Ldt-CtrlSound-SoundState {
+ background:url('imgs/sound_sprite.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-CtrlSound-MuteState {
+ background:url('imgs/mute_sprite.png') no-repeat scroll 0 0 transparent ;
+}
+
.Ldt-CtrlSound:hover {
background-position: 0 -25px;
}
@@ -289,7 +299,7 @@
/* Arrow Widget */
.Ldt-arrowWidget {
position: relative;
- background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
+
height:16px;
width:27px;
margin-bottom: -3px;
@@ -297,6 +307,18 @@
left: 0%;
}
+.Ldt-arrowLeftEdge {
+ background:url('imgs/left_edge_arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-arrowCenter {
+ background:url('imgs/arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
+.Ldt-arrowRightEdge {
+ background:url('imgs/right_edge_arrow.png') no-repeat scroll 0 0 transparent ;
+}
+
.cleaner {
clear:both;
}
@@ -779,6 +801,24 @@
.Ldt-createAnnotation-polemic-question.Ldt-createAnnotation-polemic-active {
background-position: -114px -52px;
}
+
+.Ldt-createAnnotation-endScreen-TweetLink {
+ width: 54px;
+ height: 20px;
+ background-image('imgs/tweet_button.png');
+}
+
+.Ldt-createAnnotation-endScreen-FbLink {
+ width: 55px;
+ height: 20px;
+ background-image('imgs/facebook_button.png');
+}
+
+.Ldt-createAnnotation-endScreen-GplusLink {
+ width: 50px;
+ height: 20px;
+ background-image('imgs/gplus_button.png');
+}
/* AnnotationsListWidget */
.Ldt-AnnotationsListWidget {
@@ -812,7 +852,10 @@
.Ldt-AnnotationsList-Caption {
float: left;
display: table-cell;
- vertical-align: middle;
+ vertical-align: middle;
+ height: 64px;
+ width: 64px;
+ background-image: url('imgs/video_sequence.png');
}
.Ldt-AnnotationsList-Duration {
--- a/src/js/widgets/arrowWidget.js Mon Feb 13 12:49:02 2012 +0100
+++ b/src/js/widgets/arrowWidget.js Mon Feb 13 17:36:06 2012 +0100
@@ -64,15 +64,15 @@
if (corrected_pixels <= 0)
corrected_pixels = 0;
- if (corrected_pixels <= 15) {
- var left_edge_img_templ = IriSP.templToHTML("url('{{img_dir}}/left_edge_arrow.png')");
- this.selector.children(".Ldt-arrowWidget").css("background-image", left_edge_img_templ);
+ if (corrected_pixels <= 15) {
+ this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge")
+ .addClass("Ldt-arrowLeftEdge");
} else if (corrected_pixels >= totalWidth - 25) {
- var right_edge_img_templ = IriSP.templToHTML("url('{{img_dir}}/right_edge_arrow.png')");
- this.selector.children(".Ldt-arrowWidget").css("background-image", right_edge_img_templ);
+ this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge")
+ .addClass("Ldt-arrowRightEdge");
} else {
- var img_templ = IriSP.templToHTML("url('{{img_dir}}/arrow.png')");
- this.selector.children(".Ldt-arrowWidget").css("background-image", img_templ);
+ this.selector.children(".Ldt-arrowWidget").removeClass("Ldt-arrowLeftEdge Ldt-arrowCenter Ldt-arrowRightEdge")
+ .addClass("Ldt-arrowCenter");
}
this.selector.children(".Ldt-arrowWidget").animate({"left" : corrected_pixels + "px"});
--- a/src/js/widgets/createAnnotationWidget.js Mon Feb 13 12:49:02 2012 +0100
+++ b/src/js/widgets/createAnnotationWidget.js Mon Feb 13 17:36:06 2012 +0100
@@ -98,17 +98,17 @@
}
_this.selector.find(".Ldt-createAnnotation-Description").val(newVal);
- // we use a custom event because there's no simple way to test for a js
- // change in a textfield.
- _this.selector.find(".Ldt-createAnnotation-Description").trigger("js_mod");
+
// also call our update function.
_this.handleTextChanges();
}
}(polemic));
}
+ // js_mod is a custom event because there's no simple way to test for a js
+ // change in a textfield.
this.selector.find(".Ldt-createAnnotation-Description")
- .bind("propertychange keyup input paste", IriSP.wrap(this, this.handleTextChanges));
+ .bind("propertychange keyup input paste js_mod", IriSP.wrap(this, this.handleTextChanges));
/* the cinecast version of the player is supposed to pause when the user clicks on the button */
if (this.cinecast_version) {
--- a/src/js/widgets/playerWidget.js Mon Feb 13 12:49:02 2012 +0100
+++ b/src/js/widgets/playerWidget.js Mon Feb 13 17:36:06 2012 +0100
@@ -85,21 +85,13 @@
IriSP.PlayerWidget.prototype.playButtonUpdater = function() {
var status = this._Popcorn.media.paused;
- if ( status == true ){
+ if ( status == true ){
+ /* the background sprite is changed by adding/removing the correct classes */
this.selector.find(".Ldt-CtrlPlay").attr("title", "Play");
-
- // we use templToHTML because it has some predefined
- // vars like where to get the images
- var templ = IriSP.templToHTML("url({{img_dir}}/play_sprite.png)");
- this.selector.find(".Ldt-CtrlPlay").css("background-image", templ);
-
+ this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PauseState").addClass("Ldt-CtrlPlay-PlayState");
} else {
this.selector.find(".Ldt-CtrlPlay").attr("title", "Pause");
-
- // we use templToHTML because it has some predefined
- // vars like where to get the images
- var templ = IriSP.templToHTML("url({{img_dir}}/pause_sprite.png)");
- this.selector.find(".Ldt-CtrlPlay").css("background-image", templ);
+ this.selector.find(".Ldt-CtrlPlay").removeClass("Ldt-CtrlPlay-PlayState").addClass("Ldt-CtrlPlay-PauseState");
}
return;
@@ -129,19 +121,10 @@
if ( status == true ){
this.selector.find(".Ldt-CtrlSound").attr("title", "Unmute");
-
- // we use templToHTML because it has some predefined
- // vars like where to get the images
- var templ = IriSP.templToHTML("url({{img_dir}}/sound_sprite.png)");
- this.selector.find(".Ldt-CtrlSound").css("background-image", templ);
-
+ this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-MuteState").addClass("Ldt-CtrlSound-SoundState");
} else {
this.selector.find(".Ldt-CtrlSound").attr("title", "Mute");
-
- // we use templToHTML because it has some predefined
- // vars like where to get the images
- var templ = IriSP.templToHTML("url({{img_dir}}/mute_sprite.png)");
- this.selector.find(".Ldt-CtrlSound").css("background-image", templ);
+ this.selector.find(".Ldt-CtrlSound").removeClass("Ldt-CtrlSound-SoundState").addClass("Ldt-CtrlSound-MuteState");
}
return;
--- a/src/templates/annotationsListWidget.html Mon Feb 13 12:49:02 2012 +0100
+++ b/src/templates/annotationsListWidget.html Mon Feb 13 17:36:06 2012 +0100
@@ -16,7 +16,6 @@
{{/url}}
<div style='overflow: auto; margin-top: 5px; margin-bottom: 5px;'>
<div class='Ldt-AnnotationsList-Caption'>
- <img src='{{img_dir}}/video_sequence.png'></img>
</div>
<div class='Ldt-AnnotationsList-Duration'>{{begin}} - {{end}}</div>
<div class='Ldt-AnnotationsList-Title'>{{title}}</div>
--- a/src/templates/arrowWidget.html Mon Feb 13 12:49:02 2012 +0100
+++ b/src/templates/arrowWidget.html Mon Feb 13 17:36:06 2012 +0100
@@ -1,2 +1,2 @@
-<div class='Ldt-arrowWidget'>
+<div class='Ldt-arrowWidget Ldt-arrowLeftEdge'>
</div>
--- a/src/templates/createAnnotationWidget.html Mon Feb 13 12:49:02 2012 +0100
+++ b/src/templates/createAnnotationWidget.html Mon Feb 13 17:36:06 2012 +0100
@@ -52,9 +52,9 @@
Thank you, your annotation has been saved.<br>
Would you like to share it on social networks ?
<div style='margin-top: 12px; text-align: center;'>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'><img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px;'></img></a>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'><img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px;'></img></a>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'><img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px;'></img></a>
+ <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'></a>
+ <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'></a>
+ <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'></a>
</div>
</div>
</div>
--- a/src/templates/createAnnotationWidget_festivalCinecast.html Mon Feb 13 12:49:02 2012 +0100
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,37 +0,0 @@
-{{! template for the annotation creation widget specific for the cinecast festival}}
-<div class='Ldt-createAnnotationWidget'>
- <!-- ugly div because we want to have a double border -->
- <div class='Ldt-createAnnotation-DoubleBorder'>
- <div style='margin-bottom: 7px; overflow: auto;'>
- <div class='Ldt-createAnnotation-Title'></div>
- <div class='Ldt-createAnnotation-TimeFrame'></div>
- </div>
-
- <div class='Ldt-createAnnotation-Container'>
- <textarea class='Ldt-createAnnotation-Description'></textarea>
- <div class='Ldt-createAnnotation-profileArrow'>
- <img src='{{img_dir}}/annotate_arrow.png'></img>
- </div>
- <div class='Ldt-createAnnotation-userAvatar'>
- <img src='https://si0.twimg.com/sticky/default_profile_images/default_profile_1_normal.png'></img>
- </div>
- </div>
-
- <div class='Ldt-createAnnotation-keywords'>
- Add keywords :
- </div>
- <div class='Ldt-createAnnotation-submitButton'>
- <div style='position: absolute; bottom: 10pt; right: 11pt;'>Submit</div>
- </div>
-
- <div class='Ldt-createAnnotation-endScreen' style='display: none'>
- Thank you, your annotation has been saved.<br>
- Would you like to share it on social networks ?
- <div style='margin-top: 12px; text-align: center;'>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-TweetLink'><img src='{{img_dir}}/tweet_button.png' style='margin-right: 20px;'></img></a>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-FbLink'><img src='{{img_dir}}/facebook_button.png' style='margin-right: 20px;'></img></a>
- <a target='_blank' class='Ldt-createAnnotation-endScreen-GplusLink'><img src='{{img_dir}}/gplus_button.png' style='margin-right: 20px;'></img></a>
- </div>
- </div>
- </div>
-</div>
--- a/src/templates/player.html Mon Feb 13 12:49:02 2012 +0100
+++ b/src/templates/player.html Mon Feb 13 17:36:06 2012 +0100
@@ -1,7 +1,7 @@
{{! template for the radio player }}
<div class='Ldt-controler demo'>
<div class='Ldt-LeftPlayerControls'>
- <div class='Ldt-button Ldt-CtrlPlay' title='Play/Pause'></div>
+ <div class='Ldt-button Ldt-CtrlPlay Ldt-CtrlPlay-PlayState' title='Play/Pause'></div>
<div class='Ldt-button Ldt-CtrlAnnotate' title='Annotate'></div>
<div class='Ldt-button Ldt-CtrlSearch' title='Search'></div>
<div class='LdtSearch'>
@@ -15,6 +15,6 @@
<div class='Ldt-TimeSeparator'>/</div>
<div class='Ldt-TotalTime' title='Total time'>00:00</div>
</div>
- <div class='Ldt-button Ldt-CtrlSound' title='Mute/Unmute'></div>
+ <div class='Ldt-button Ldt-CtrlSound Ldt-CtrlSound-MuteState' title='Mute/Unmute'></div>
</div>
</div>
--- a/test/integration/polemic-festival.htm Mon Feb 13 12:49:02 2012 +0100
+++ b/test/integration/polemic-festival.htm Mon Feb 13 17:36:06 2012 +0100
@@ -21,9 +21,9 @@
<div id="LdtPlayer"></div>
<div id="Sparkline"></div>
<script type="text/javascript">
- var platf_url = "http://192.168.56.101/pf/ldtplatform/ldt/",
- project_id = "bb18dcdc-41bc-11e1-91b2-08002791f1b7",
- json_url = platf_url + 'cljson/id/' + project_id;
+ var platf_url = IriSP.platform_url;
+ var project_id = "a0593b58-f258-11df-80e1-00145ea4a2be";
+ var json_url = platf_url + '/ldtplatform/ldt/cljson/id/' + project_id;
var config = {
gui:{
width:650,