From: riccardo <riccardo@parisson.com>
Date: Sat, 25 Jun 2011 17:12:18 +0000 (+0200)
Subject: Added classic skin and folders (tested), added round to canvas line position (to... 
X-Git-Tag: 1.1~51
X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=fe97d80f0aa3aaeab2ddb5d6b010714cff9d28db;p=telemeta.git

Added classic skin and folders (tested), added round to canvas line position (to avoid antialias effect)
---

diff --git a/telemeta/htdocs/timeside/js/player.js b/telemeta/htdocs/timeside/js/player.js
index b8879833..a5d21469 100644
--- a/telemeta/htdocs/timeside/js/player.js
+++ b/telemeta/htdocs/timeside/js/player.js
@@ -322,7 +322,7 @@ Timeside.classes.Player = Timeside.classes.TimesideClass.extend({
         var div = control.find('.ts-volume-wrapper-div');
         div.css({
             'position':'absolute',
-            'left':(volumeSpeaker.position().left+volumeSpeaker.outerWidth())+'px',
+            'left':(volumeSpeaker.position().left+volumeSpeaker.outerWidth(true))+'px',
             'top':0,
             'width':'auto',
             'height':'100%'
diff --git a/telemeta/htdocs/timeside/js/rulermarker.js b/telemeta/htdocs/timeside/js/rulermarker.js
index f17ac2b2..e98730c4 100644
--- a/telemeta/htdocs/timeside/js/rulermarker.js
+++ b/telemeta/htdocs/timeside/js/rulermarker.js
@@ -93,11 +93,13 @@ Timeside.classes.RulerMarker = Timeside.classes.TimesideClass.extend({
         var canvas = undefined;
         var canvasClass = cssPref + 'svg-'+className+'-line';
         var vml = this.$TU.vml; //if vml, this class is populated with methods and NOT undefined
+        var round = Math.round;
         if(!vml){
             canvas = this.createCanvasSvg(waveImgDiv, arrowBaselineWidth);
             var path = canvas.childNodes[0]; //note that $J(canvas).find('path') does not work in FF at least 3.5
             path.setAttributeNS(null,'class',canvasClass);
             this.moveCanvas = function(pixelOffset){
+                pixelOffset = round(pixelOffset);
                 canvas.setAttributeNS( null, "transform", "translate("+pixelOffset+",0)");
             };
             this.jQueryCanvas = $J(canvas);
@@ -107,6 +109,7 @@ Timeside.classes.RulerMarker = Timeside.classes.TimesideClass.extend({
             var attributes = vml.getVmlAttr(canvasClass);
             canvas.attr(attributes); //Raphael method
             this.moveCanvas = function(pixelOffset){
+                pixelOffset = round(pixelOffset);
                 //for some reason, coordinates inside the VML object are stored by raphael with a zoom of 10:
                 this.jQueryCanvas.css('left',(10*pixelOffset)+'px');
             };
diff --git a/telemeta/htdocs/timeside/skins/classic/img/forward.png b/telemeta/htdocs/timeside/skins/classic/img/forward.png
new file mode 100644
index 00000000..86485d0d
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/forward.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/pause.png b/telemeta/htdocs/timeside/skins/classic/img/pause.png
new file mode 100644
index 00000000..d09ad51c
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/pause.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/play.png b/telemeta/htdocs/timeside/skins/classic/img/play.png
new file mode 100644
index 00000000..ccb87e87
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/play.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/player_controlbg.png b/telemeta/htdocs/timeside/skins/classic/img/player_controlbg.png
new file mode 100644
index 00000000..c2b7f47d
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/player_controlbg.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/rewind.png b/telemeta/htdocs/timeside/skins/classic/img/rewind.png
new file mode 100644
index 00000000..ec45b385
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/rewind.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/setmarker.png b/telemeta/htdocs/timeside/skins/classic/img/setmarker.png
new file mode 100644
index 00000000..b642e824
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/setmarker.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/volumeoff.png b/telemeta/htdocs/timeside/skins/classic/img/volumeoff.png
new file mode 100644
index 00000000..5ae77775
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/volumeoff.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/volumeon.png b/telemeta/htdocs/timeside/skins/classic/img/volumeon.png
new file mode 100644
index 00000000..71d83a59
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/volumeon.png differ
diff --git a/telemeta/htdocs/timeside/skins/classic/img/wait.gif b/telemeta/htdocs/timeside/skins/classic/img/wait.gif
new file mode 100644
index 00000000..5b33f7e5
Binary files /dev/null and b/telemeta/htdocs/timeside/skins/classic/img/wait.gif differ
diff --git a/telemeta/htdocs/timeside/skins/classic/style.css b/telemeta/htdocs/timeside/skins/classic/style.css
new file mode 100644
index 00000000..068b72a9
--- /dev/null
+++ b/telemeta/htdocs/timeside/skins/classic/style.css
@@ -0,0 +1,152 @@
+/*
+* Style for the timeside player. The player div is supposed to be of class .ts-player. Change if needed
+* For details, see http://code.google.com/p/timeside/wiki/UiGuide?ts=1308677096&updated=UiGuide#CSS_and_skins
+*/
+
+.ts-player {
+    padding: 0;
+    border: solid 1px #ADADAD;
+    margin-top: 2px;
+}
+
+
+.ts-player .ts-ruler{
+    color: #ADADAD;
+    background-color: #F2F2F2;
+    font-size: 10px;
+    line-height: 13px;
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+  ".ts-player .ts-ruler .ts-svg-ruler-upper-rect" */
+.ts-svg-ruler-upper-rect{
+    fill:  #FFFFFF;
+    stroke-width:0;
+    stroke: #FFFFFF; /*to be sure...*/
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+  ".ts-player .ts-ruler .ts-svg-ruler-lines"*/
+.ts-svg-ruler-lines{
+    stroke-width:1;
+    stroke: #ADADAD;
+}
+
+/*wave:*/
+.ts-player .ts-wave {
+    height: 130px;
+}
+
+/*.ts-player .ts-viewer .ts-marker {*/
+.ts-player .ts-ruler .ts-marker {
+     padding: 0 0.5em;
+    background: #fff;
+    border: 1px solid #92bdd4;
+    color: #92bdd4;
+    text-decoration: none;
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+  ".ts-player .ts-wave .ts-image-canvas .ts-svg-marker-line" */
+.ts-svg-marker-line {
+    fill: #92bdd4;
+    stroke-width:0;
+}
+
+/*.ts-player .ts-viewer a.ts-pointer {*/
+.ts-player .ts-ruler a.ts-pointer {
+    color: white ;
+    background-color: #92bde4;
+    padding: 0 0.5em;
+    /*border: solid 1px #92bde4;*/
+
+    text-decoration: none;
+     -moz-border-radius: .3em;
+    -webkit-border-radius: .3em;
+    border-radius: .3em;
+    /*color: #3c4251; #6A0307 !important;*/
+}
+/*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED:
+  ".ts-player .ts-wave .ts-image-canvas .ts-svg-pointer-line" */
+.ts-svg-pointer-line {
+    fill: #92bde4;
+    stroke-width:0;
+}
+
+.ts-player .ts-wave .ts-image {
+    background: #090e0d ;
+}
+
+.ts-player .ts-control {
+    background: url('img/player_controlbg.png');
+}
+
+ /** display (inline-block) and overflow of a is set inside javascript*/
+.ts-player .ts-control .ts-button {
+    background-repeat: no-repeat;
+    margin:4px;
+    height:21px;
+    width:21px;
+   /* background-position: 0px 0px;*/
+}
+.ts-player .ts-control .ts-button:hover {
+    background-position: 0px -21px;
+}
+.ts-player .ts-control .ts-play {
+    background-image: url('img/play.png');
+}
+
+.ts-player .ts-control  .ts-pause {
+    background-image: url('img/pause.png');
+}
+
+.ts-player .ts-control  .ts-rewind {
+    background-image: url('img/rewind.png');
+}
+
+.ts-player .ts-control  .ts-forward {
+    background-image: url('img/forward.png');
+}
+
+.ts-player .ts-control  .ts-set-marker {
+    background-image: url('img/setmarker.png');
+}
+
+.ts-player .ts-control .ts-volume-speaker-on {
+    background-image: url('img/volumeon.png');
+    width:24px;
+}
+.ts-player .ts-control .ts-volume-speaker-off {
+    background-image: url('img/volumeoff.png');
+    width:24px;
+}
+.ts-player .ts-control .ts-volume-bar-container {
+    /*background: url('img/controlbg-inverted.png');
+    background-position: -3px left;
+    background-repeat: repeat-x;*/
+    border: 1px solid #a3a4a7;
+    height:10px;
+    width:42px;
+    margin-top:9px;
+     -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+
+}
+.ts-player .ts-control .ts-volume-bar { /*width will be changed inside the code*/
+    background-color: #ccc;
+     -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}
+/*position is set to absolute inside javascript*/
+.ts-player .ts-control .ts-wait {
+    background-repeat: no-repeat;
+    background-image: url('img/wait.gif');
+    text-align: right;
+    right:0;
+    height:28px;
+    line-height:28px;
+    top:0;
+    background-position: right center;
+    padding-right: 30px;
+    font-size: 80%;
+    color: #000;
+}
diff --git a/telemeta/htdocs/timeside/skins/lab/style.css b/telemeta/htdocs/timeside/skins/lab/style.css
index 18d3e9bc..712aec24 100755
--- a/telemeta/htdocs/timeside/skins/lab/style.css
+++ b/telemeta/htdocs/timeside/skins/lab/style.css
@@ -57,9 +57,9 @@
     border: solid 1px #BB0000;
 
     text-decoration: none;
-     -moz-border-radius: .3em !important;
-    -webkit-border-radius: .3em  !important;
-    border-radius: .3em !important;
+     -moz-border-radius: .3em;
+    -webkit-border-radius: .3em;
+    border-radius: .3em;
     /*color: #3c4251; #6A0307 !important;*/
 }
 /*svg style, MUST BE A SINGLE SELECTOR. FOR INSTANCE, THIS DOES NOT WORK WHEN SVG IS NOT SUPPORTED: