[Media] Sample application, play, seekTo, volume, stop implemented.

Change-Id: I46ee8839a96789c23526d14b565c42cb830c0961
Signed-off-by: Lukasz Foniok <l.foniok@samsung.com>

diff --git a/sample/plugins/media/media.css b/sample/plugins/media/media.css
index fca8a41..8ebf97f 100644 (file)
--- a/sample/plugins/media/media.css
+++ b/sample/plugins/media/media.css
@@ -271,17 +271,6 @@ textarea {
     color:#639ecd;
     word-wrap:break-word;
 }
-#progressBar {
-    border:1px solid #aaa;
-    color:#34baa4;
-    height:20px;
-}
-
-#progress {
-    background-color:#b53e3e;
-    height:20px;
-    display:inline-block;
-}
 
 input {
     width:100%;
@@ -305,7 +294,7 @@ input {
     width:30%
 }
 
-input[type=range]
+#volume[type=range]
 {
     writing-mode: bt-lr; /* IE */
     -webkit-appearance: slider-vertical; /* WebKit */

diff --git a/sample/plugins/media/media.html b/sample/plugins/media/media.html
index a55fe51..465627f 100644 (file)
--- a/sample/plugins/media/media.html
+++ b/sample/plugins/media/media.html
@@ -41,17 +41,18 @@
             <div id="left">
                 <div>
                     <h3>Filename: </h3>
-                    <input id="inputFile" value="http://cordova.apache.org/downloads/BlueZedEx.mp3" type="text">
+                    <input id="inputFile" value="" type="text">
                 </div>
-                <div id="progressBar">
-                    <span id="progress"></span>
+                <div id="">
+                    <input id="progress" value="5" type="range" min="0" max="1000" step="1"
+                           onchange="setPos(this.value);">
                 </div>
             </div>
             <div id="right">
-                <input id="inputFile2" value="0" type="range" min="0" max="10" step="1">
+                <input id="volume" value="0" type="range" min="0" max="10" step="1" onchange="setVolume(this.value);">
             </div>
             <div  class="action-area ch10">
-                <button class="button dh" onclick="play();" >|></button>
+                <button id="play" class="button dh" onclick="play();" >|></button>
                 <button class="button dh" onclick="stop();" >|_|</button>
                 <button class="button dh" onclick="recordAudio();" >O</button>
                 <button class="button dh" onclick="create();">Reload</button>
@@ -70,48 +71,12 @@
                     </tr>
                     <tr>
                         <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
-                    </tr>
-                    <tr>
-                        <td>2.</td>
-                        <td>Test2.wav</td>
+                        <td>/opt/usr/media/Documents/BlueZedEx.mp3</td>
                     </tr>
                 </tbody>
             </table>
             <div>
-                <p class="info">Commands' output:</p>
+                <p class="info" id="resultsLog">Commands' output:</p>
             </div>
             <a id="back" href="../../index.html" >Back</a>
         </div>

diff --git a/sample/plugins/media/media.js b/sample/plugins/media/media.js
index caeac29..fa3326b 100644 (file)
--- a/sample/plugins/media/media.js
+++ b/sample/plugins/media/media.js
@@ -14,6 +14,11 @@
  *    limitations under the License.
  */
 
+var media;
+var myinterval;
+var table;
+var lastIndex;
+
 var deviceReady = function() {
   window.logger.log('Device ready');
 };
@@ -27,7 +32,7 @@ var init = function () {
 window.onload = init;
 
 $(document).ready(function() {
-    var table = $('#example').DataTable({
+    table = $('#example').DataTable({
         select: 'single',
         bLengthChange: false,
         paging: true,
@@ -36,6 +41,24 @@ $(document).ready(function() {
         scrollY:     100,
         scroller:    true
     });
+    
+    table.on( 'select', function ( e, dt, type, indexes ) {
+        if ( type === 'row' ) {
+            //var data = table.row( indexes ).data().pluck( 'id' );
+            //window.logger.log(table.row(indexes).data()[1]);
+            document.getElementById('inputFile').value = table.row(indexes).data()[1];
+            if(media!=null){
+                release();
+            }
+            create();
+            lastIndex = table.row(indexes).data()[0].split("")[0];
+            window.logger.log("last index " + lastIndex);
+        }
+    });
+    
+    table.on('added', function(){
+        window.logger.log("dupa");
+    });
 } );
 
 var success = function() {
@@ -46,9 +69,6 @@ var error = function(e) {
   window.logger.log(e);
 };
 
-var media;
-var myinterval;
-
 function status(s, pos) {
   window.logger.log('status: ' + s + ', pos: ' + pos);
   if (s === Media.MEDIA_STOPPED) {
@@ -79,13 +99,13 @@ function updateProgress() {
   var progress = document.getElementById('progress'), value = 0;
 
   media.getCurrentPosition(function(pos) {
-    window.logger.log('Get current position success 100 / ' + media.duration + " * "
+    console.log('Get current position success 1000 / ' + media.getDuration() + " * "
         + pos);
     if (pos > 0) {
-      value = Math.floor((100 / media.getDuration()) * pos);
+      value = Math.floor((1000 / media.getDuration()) * pos);
     }
-    progress.style.width = value + '%';
-    window.logger.log('width: ' + progress.style.width);
+    progress.value = value;
+    window.logger.log('width: ' + progress.value);
   });
 }
 
@@ -102,10 +122,11 @@ function play() {
       window.logger.log('Error ' + e);
     }
   } else {
-    playBtn.textContent = '|>';
+    playBtn.textContent = '|>';    
     window.logger.log('Pausing: ');
     try {
       media.pause();
+      clearInterval(myinterval);
     } catch (e) {
       window.logger.log("Error " + e);
     }
@@ -137,28 +158,27 @@ function getPos() {
   });
 }
 
-function setPos() {
-  var pos = document.getElementById('setPosValue').value;
-  window.logger.log('setPos');
-  media.seekTo(pos);
+function setPos(value) {
+  //var pos = document.getElementById('setPosValue').value;
+  clearInterval(myinterval);
+  //value = Math.floor((1000 / media.getDuration()) * pos);  
+  var pos = value * media.getDuration() / 1000;
+  console.log('setPos to ' + value + "*" + media.getDuration() + "/ 1000 = " + pos );
+  media.seekTo(pos*1000);
+  myinterval = setInterval(updateProgress, 100);
 }
 
-function setVolume() {
-  var volume = document.getElementById('setVolValue').value;
+function setVolume(value) {
   window.logger.log('setVol: ' + volume);
+  var volume = value / 10;
   media.setVolume(volume);
 }
 
-function expand() {
-  window.logger.log('expand');
-  var progress = document.getElementById('progress');
-  window.logger.log('width: ' + progress.style.width);
-  progress.style.width = 40 + '%';
-}
-
 function recordAudio() {
   window.logger.log('recordAudio');
-  media.startRecord();
+  create();
+  table.row.add([ '2.', media.src ]).draw(false);
+  //media.startRecord();
 }
 
 function stopRecAudio() {