From 5d2ab45fff4e823e36ff37501b17002e981253f1 Mon Sep 17 00:00:00 2001
From: Tariq Rasheed <tariq.rasheed@arbisoft.com>
Date: Thu, 21 Sep 2017 19:34:05 +0500
Subject: [PATCH 1/7] Custom audio player with scrollable transcript  (#1)

- Customized audio player with custom style.
- Scrollable transcript
- Author will put two source links of media file, first (.ogg) for play and second (.mp3) for download.
- To display transcript, author will put source of transcript.
- User can download transcript file (.txt / .srt ) and media file (.mp3).
---
 README.md                         |   8 +-
 audio/audio.py                    |  29 ++-
 audio/static/css/audio.css        |   9 -
 audio/static/css/audio.scss       | 379 ++++++++++++++++++++++++++++++
 audio/static/html/audio.html      |  58 ++++-
 audio/static/html/audio_edit.html |  16 +-
 audio/static/js/src/audio.js      | 178 ++++++++++++++
 audio/static/js/src/audio_edit.js |   4 +-
 8 files changed, 652 insertions(+), 29 deletions(-)
 delete mode 100644 audio/static/css/audio.css
 create mode 100644 audio/static/css/audio.scss

diff --git a/README.md b/README.md
index 91b79cb..946c6da 100644
--- a/README.md
+++ b/README.md
@@ -2,8 +2,12 @@ AudioXBlock
 ===========
 
 This is a simple XBlock which will play audio files as an HTML5 audio
-element. If unavailable, it will fall back to an embed element.
+element and render the transcript as plain text. If unavailable, it will fall back to an embed element.
 
 Usage: 
 
-    <audio src="http://server.tld/static/song.mp3" />
+    <audio src="http://server.tld/static/song.mp3" transcript_src="http://transcripts.com/sample.srt"/>
+
+    open-edx:
+
+        key : "audio"
diff --git a/audio/audio.py b/audio/audio.py
index 57e1730..cc69d80 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -14,10 +14,13 @@ class AudioXBlock(XBlock):
 
     # Fields are defined on the class.  You can access them in your code as
     # self.<fieldname>.
-    src = String(
-           scope = Scope.settings, 
-           help = "URL for MP3 file to play"
-        )
+
+    # this variable holds the source of main media file
+    src = String(scope=Scope.settings, help="URL for .ogg file to play")
+    # reference for script file
+    transcript_src = String(scope=Scope.settings, help="plain text", default="")
+    # holds the downloadable link of media file
+    downloadable_src = String(scope=Scope.settings, help="URL for .mp3 file to download")
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
@@ -31,8 +34,12 @@ def student_view(self, context=None):
         when viewing courses.
         """
         html = self.resource_string("static/html/audio.html")
-        frag = Fragment(html.format(src = self.src))
-        frag.add_css(self.resource_string("static/css/audio.css"))
+        frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
+        frag.add_css(self.resource_string("static/css/audio.scss"))
+
+        js = self.resource_string("static/js/src/audio.js")
+        frag.add_javascript(js)
+        frag.initialize_js('AudioXBlock')
         return frag
 
     def studio_view(self, context):
@@ -40,7 +47,7 @@ def studio_view(self, context):
         The view for editing the AudioXBlock parameters inside Studio.
         """
         html = self.resource_string("static/html/audio_edit.html")
-        frag = Fragment(html.format(src=self.src))
+        frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
 
         js = self.resource_string("static/js/src/audio_edit.js")
         frag.add_javascript(js)
@@ -54,6 +61,8 @@ def studio_submit(self, data, suffix=''):
         Called when submitting the form in Studio.
         """
         self.src = data.get('src')
+        self.transcript_src = data.get('transcript_src')
+        self.downloadable_src = data.get('downloadable_src')
 
         return {'result': 'success'}
 
@@ -65,9 +74,9 @@ def workbench_scenarios():
         return [
             ("AudioXBlock",
              """<vertical_demo>
-                  <audio src="http://localhost/Ikea.mp3"> </audio>
-                  <audio src="http://localhost/skull.mp3"> </audio>
-                  <audio src="http://localhost/monkey.mp3"> </audio>
+                    <audio src="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" 
+                    transcript_src="http://norvig.com/big.txt"
+                    downloadable_src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"> </audio>
                 </vertical_demo>
              """),
         ]
diff --git a/audio/static/css/audio.css b/audio/static/css/audio.css
deleted file mode 100644
index 4e81145..0000000
--- a/audio/static/css/audio.css
+++ /dev/null
@@ -1,9 +0,0 @@
-/* CSS for AudioXBlock */
-
-.audio_block .count {
-    font-weight: bold;
-}
-
-.audio_block p {
-    cursor: pointer;
-}
\ No newline at end of file
diff --git a/audio/static/css/audio.scss b/audio/static/css/audio.scss
new file mode 100644
index 0000000..270f405
--- /dev/null
+++ b/audio/static/css/audio.scss
@@ -0,0 +1,379 @@
+/* CSS for AudioXBlock */
+
+.audio_block .count {
+    font-weight: bold;
+}
+
+.audio_block p {
+    cursor: pointer;
+}
+.pointer {
+    cursor: pointer;
+}
+
+
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+.grid {
+    margin: 0 auto;
+    max-width: 1200px;
+    width: 100%;
+}
+
+.row {
+    width: 100%;
+    margin-bottom: 20px;
+    display: flex;
+}
+
+.col-1 {
+    width: 8.33%;
+}
+
+.col-2 {
+    width: 16.66%;
+}
+
+.col-3 {
+    width: 25%;
+}
+
+.col-4 {
+    width: 33.33%;
+}
+
+.col-5 {
+    width: 41.66%;
+}
+
+.col-6 {
+    width: 50%;
+}
+
+.col-7 {
+    width: 58.33%;
+}
+
+.col-8 {
+    width: 66.66%;
+}
+
+.col-9 {
+    width: 75%;
+}
+
+.col-10 {
+    width: 83.33%;
+}
+
+.col-11 {
+    width: 91.66%;
+}
+
+.col-12 {
+    width: 100%;
+}
+
+.audio-img img {
+    width: 100%;
+    height: auto;
+    display: block;
+}
+.progress-bar {
+    height: 6px;
+    position: relative;
+    overflow: hidden;
+    border-top: 1px solid #292d30;
+}
+#play-bar {
+    position: absolute;
+    left:0;
+    top:0;
+    height: 5px;
+    z-index: 9;
+    vertical-align: top;
+}
+.canvas-bar {
+    height: 5px;
+    width: 100%;
+    line-height: 0;
+    font-size: 0;
+    vertical-align: top;
+}
+.audio-bar {
+    background: #282C2F;
+    height: 32px;
+    padding: 8px 10px;
+}
+.audio-bar:after {
+    display: block;
+    clear: both;
+    content: "";
+}
+.play-btn-holder {
+    float: left;
+    width: 40px;
+}
+.play {
+    padding: 0;
+    width: 16px;
+    height: 0;
+    background: none;
+    border: none;
+    float: left;
+    margin: 0 0 0 15px;
+    border-top: 8px solid transparent;
+    border-left: 12px solid #fff;
+    border-bottom: 8px solid transparent;
+}
+.pause {
+    padding: 0;
+    background: none;
+    border:none;
+    float: left;
+    margin: 0 0 0 15px;
+    width: 14px;
+    height: 16px;
+    border-right: 4px solid #fff;
+    border-left: 4px solid #fff;
+}
+#timer {
+    float: left;
+    font-size: 12px;
+    line-height:16px;
+    color: #fff;
+    margin: 0 0 0 20px;
+}
+.audio-bar-right {
+    float: right;
+}
+.speed-holder {
+    float: left;
+    width: 105px;
+    padding: 0 0 0 20px;
+    position: relative;
+}
+.speed-holder:after {
+    position: absolute;
+    left:0;
+    top:-8px;
+    bottom: -8px;
+    content: "";
+    border-left: 1px solid #363C3F;
+}
+.speed-holder .value {
+    color: #ffffff;
+    display: block;
+    font-size: 12px;
+    line-height:16px;
+    position: relative;
+    padding: 0 0 0 10px;
+}
+.speed-holder .value:after {
+    position: absolute;
+    left: 0;
+    top: 4px;
+    content: "";
+    border-top: 4px solid transparent;
+    border-left: 6px solid #fff;
+    border-bottom: 4px solid transparent;
+}
+.speed-list {
+    list-style: none;
+    margin: 0;
+    padding: 0 0 9px;
+    position: absolute;
+    left: 0;
+    bottom:100%;
+    z-index: 999;
+    width: 100%;
+    background: #000;
+}
+.speed-list li {
+    color: #fff;
+    padding: 5px;
+    font-size: 12px;
+    line-height:16px;
+    color: #fff;
+}
+.speed-list li:hover {
+    background: #333333;
+}
+.volume-holder {
+    float: left;
+    margin: 0 15px 0 0;
+    position: relative;
+}
+.volume-holder .icon-volume{
+    width: 16px;
+    display: block;
+}
+.volume-holder .icon-volume img{
+    width: 100%;
+    height: auto;
+    display: block;
+}
+.volume-control {
+    position: absolute;
+    width: 50px;
+    transform: rotate(-90deg);
+    z-index: 999;
+    left: -19px;
+    top: -34px;
+}
+
+input[type=range].slider * {
+  border: none !important;
+  border-radius: 0 !important;
+  box-shadow: none !important;
+  outline: none !important;
+}
+
+input[type=range].slider:focus {
+}
+
+input[type=range].slider {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 100%;
+  margin: 0;
+  position: relative;
+}
+input[type=range].slider:focus {
+  outline: none;
+}
+input[type=range].slider::-webkit-slider-runnable-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  background:#CD578D;
+
+}
+input[type=range].slider::-webkit-slider-thumb {
+  height: 5px;
+  width: 10px;
+  background: white;
+  cursor: pointer;
+  -webkit-appearance: none;
+  margin-top: 0px;
+}
+input[type=range].slider:focus::-webkit-slider-runnable-track {
+  background: #CD578D;
+}
+input[type=range].slider::-moz-range-track {
+  width: 100%;
+  height: 5px;
+  cursor: pointer;
+  background: #CD578D;
+}
+input[type=range].slider::-moz-range-thumb {
+  height: 10px;
+  width: 5px;
+  background: white;
+  cursor: pointer;
+}
+input[type=range].slider::-ms-track {
+  width: 100%;
+  height: 10px;
+  cursor: pointer;
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+input[type=range].slider::-ms-fill-lower {
+    background: #CD578D;
+}
+input[type=range].slider::-ms-fill-upper {
+  background: #CD578D;
+}
+input[type=range].slider::-ms-thumb {
+  width: 5px;
+    background: #CD578D;
+  cursor: pointer;
+  height: 5px;
+}
+input[type=range].slider:focus::-ms-fill-lower {
+  background: white;
+}
+input[type=range].slider:focus::-ms-fill-upper {
+  background: white;
+}
+.seekbar-style {
+    z-index: 99;
+    position: absolute !important;
+
+    top:0;
+    height: 5px;
+    background: none;
+    border:none;
+}
+.seekbar-style * {
+  border:none !important;
+  box-shadow: none !important;
+  border-radius: 0 !important;
+}
+input[type=range].seekbar-style.slider::-webkit-slider-runnable-track {
+    background: none !important;
+}
+input[type=range].seekbar-style.slider:focus::-webkit-slider-runnable-track {
+  background: none !important
+}
+input[type=range].seekbar-style.slider::-moz-range-track {
+  background: none !important
+}
+input[type=range].seekbar-style.slider::-ms-fill-lower {
+    background: none !important
+}
+input[type=range].seekbar-style.slider::-ms-fill-upper {
+  background: none !important
+}
+input[type=range].seekbar-style.slider::-ms-thumb {
+    background: none !important
+}
+input[type=range].seekbar-style.slider::-webkit-slider-thumb {
+  width: 10px;
+  background: #fff;
+}
+input[type=range].seekbar-style.slider::-moz-range-thumb {
+  width: 10px;
+  background: #fff;
+}
+input[type=range].seekbar-style.slider:focus::-ms-fill-lower {
+  background: #fff;
+}
+input[type=range].seekbar-style.slider:focus::-ms-fill-upper {
+  background: #fff;
+}
+
+.download-links a{
+    margin-right: 15px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/audio/static/html/audio.html b/audio/static/html/audio.html
index 78778f5..6ff8bc5 100644
--- a/audio/static/html/audio.html
+++ b/audio/static/html/audio.html
@@ -1,7 +1,55 @@
-<div class="audio_block">
-<audio controls preload>
-  <source src="{src}">
-  <embed height="50" width="100" src="{src}">
-</audio>
+<div class="row audio_block">
+    <div class="col-6">
+        <div class="audio-img">
+            <img src="http://placehold.it/570x200" alt="">
+        </div>
+        <div class="progress-bar">
+            <input type="range" step="any" id="seekbar" class="slider seekbar-style">
+            <canvas id="play-bar" class="canvas-bar" width="100">
+            </canvas>
+            <canvas id="buffering-canvas" class="canvas-bar">
+            </canvas>
+        </div>
 
+        <div class="audio-bar">
+            <div class="play-btn-holder">
+                <span id="play-btn" class="play pointer"></span>
+                <span id="pause-btn" class="pause pointer"></span>
+            </div>
+            <label id="timer">-:--:--</label>
+            <div class="audio-bar-right">
+                <div class="volume-holder">
+                    <div class="volume-control">
+                        <input type="range" class="slider" min="0" max="1" step="0.01" id="volume">
+                    </div>
+                    <span id="volume-controller" class="icon-volume pointer"><img
+                            src="data:image/png;base64,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"
+                            width="256" height="40px"></span>
+                </div>
+                <div class="speed-holder">
+                    <ul id="speed" class="speed-list">
+                        <li class="pointer" rate="0.25">Speed 0.25x</li>
+                        <li class="pointer" rate="0.5">Speed 0.5x</li>
+                        <li class="pointer" rate="0.75">Speed 0.75x</li>
+                        <li class="pointer" rate="1">Speed 1.0x</li>
+                        <li class="pointer" rate="1.25">Speed 1.25x</li>
+                        <li class="pointer" rate="1.5">Speed 1.5x</li>
+                        <li class="pointer" rate="2">Speed 2x</li>
+                    </ul>
+                    <span id="playback-rate-controller" class="value pointer">Speed 1.0x</span>
+                </div>
+            </div>
+        </div>
+        <audio id="audio">
+            <source src="{src}" type="audio/ogg">
+        </audio>
+        <h4>Downloads:</h4>
+        <div class="download-links">
+            <a href="{transcript_src}">Transcript(.txt)</a>
+            <a href="{downloadable_src}">Audio(.mp3)</a>
+        </div>
+    </div>
+    <div class="col-6">
+        <embed id="transcript-embed" type="text/plain" src="{transcript_src}" class="col-12"></embed>
+    </div>
 </div>
diff --git a/audio/static/html/audio_edit.html b/audio/static/html/audio_edit.html
index 9d4e0b9..85d43f4 100644
--- a/audio/static/html/audio_edit.html
+++ b/audio/static/html/audio_edit.html
@@ -2,8 +2,20 @@
   <ul class="list-input settings-list">
     <li class="field comp-setting-entry is-set">
       <div class="wrapper-comp-setting">
-        <label class="label setting-label" for="audio_src">Audio Source Location</label>
-        <input class="input setting-input" name="audio_src" id="audio_src" value="{src}" type="text" />
+        <label class="label setting-label" for="audio_src">Audio Source (.ogg)</label>
+        <input placeholder="http://audio.com/my-audio.ogg" class="input setting-input" name="audio_src" id="audio_src" value="{src}" type="text"/>
+      </div>
+    </li>
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="audio_src_downloadable">Audio Source (.mp3)</label>
+        <input placeholder="http://audio.com/my-audio.mp3" class="input setting-input" name="audio_src_downloadable" id="audio_src_downloadable" value="{downloadable_src}" type="text"/>
+      </div>
+    </li>
+    <li class="field comp-setting-entry is-set">
+      <div class="wrapper-comp-setting">
+        <label class="label setting-label" for="transcript_src">Transcript Source Location</label>
+        <input placeholder="http://transcripts.com/my-transcript.srt" class="input setting-input" name="transcript_src" id="transcript_src" value="{transcript_src}" type="text"/>
       </div>
     </li>
   </ul>
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index e69de29..a721cc5 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -0,0 +1,178 @@
+function AudioXBlock(runtime, element) {
+
+    // reference of main audio file
+    var audio = document.getElementById("audio");
+
+    // reference of buffering canvas, that indicates audio file buffered progress
+    var bufferingCanvas = document.getElementById('buffering-canvas');
+    // context of buffering canvas
+    var bufferingCanvasContext = bufferingCanvas.getContext('2d');
+    // variable that will hold the incremental progress for buffering canvas
+    var bufferIncrement;
+
+    // reference of play bar canvas, that indicates the progress of playing audio file
+    var playBarCanvas = document.getElementById('play-bar');
+    // context of play bar canvas
+    var playBarContext = playBarCanvas.getContext('2d');
+
+
+    // loading the meta data for audio file, e.g. audio length, and playing automatically
+    audio.addEventListener('loadedmetadata', function() {
+        bufferIncrement = bufferingCanvas.width / audio.duration;
+        audio.play();
+    });
+
+
+    // setting up the buffering canvas
+    bufferingCanvasContext.fillStyle = '#4F595D';
+    bufferingCanvasContext.fillRect(0, 0, bufferingCanvas.width, bufferingCanvas.height);
+    bufferingCanvasContext.fillStyle = '#697275';
+
+    //setting up the play bar canvas
+    playBarContext.fillStyle = '#CD578D';
+
+
+    // this event will fired when the time indicated by the currentTime attribute has been updated.
+    audio.addEventListener('timeupdate', function() {
+      for ( var i = 0; i < audio.buffered.length; i++) {
+        var startX = audio.buffered.start(i) * bufferIncrement;
+        var endX = audio.buffered.end(i) * bufferIncrement;
+        var width = endX - startX;
+        // keep updating the buffered canvas
+        bufferingCanvasContext.fillRect(startX, 0, width, bufferingCanvas.height);
+        bufferingCanvasContext.rect(startX, 0, width, bufferingCanvas.height);
+      }
+        // calculating the playing progress in percentage
+        var playedAudio  = (audio.currentTime / audio.duration ) * 100;
+        // keep updating the play bar canvas
+        playBarContext.fillRect(0, 0, playedAudio, playBarCanvas.height);
+    });
+
+    /*
+    this event is fired when a seek operation completed.
+    this event is needed to clear the play bar canvas whenever user seek.
+    */
+    audio.addEventListener('seeked', function() {
+        playBarContext.clearRect(0,0,playBarCanvas.width, playBarCanvas.height);
+     });
+
+    // Getting DOM references with JQuery
+    var playBtn = $('#play-btn');
+    var volume = $('#volume');
+    var playbackRateSet = $('#speed');
+    var playbackRateBtn = $('#playback-rate-controller');
+    var pauseBtn = $('#pause-btn');
+    var volumeBtn = $('#volume-controller');
+    var seekBar = $('#seekbar');
+    var timer = $('#timer');
+
+    // setting up initial state of player
+    playBtn.hide();
+    volume.val(audio.volume);
+    playbackRateSet.hide();
+    volume.hide();
+
+
+    // handler for play button click event
+    playBtn.click(function () {
+        audio.play();
+        $(this).hide();
+        pauseBtn.show();
+    });
+
+    // handler for pause button click event
+    pauseBtn.click(function () {
+        audio.pause();
+        $(this).hide();
+        playBtn.show();
+    });
+
+    // volume handler
+    volume.change(function () {
+        audio.volume = $(this).val();
+        if (audio.volume == 0) {
+            audio.muted = true;
+        } else {
+            audio.muted = false;
+        }
+    });
+
+    // handler for volume controller click event
+    volumeBtn.click(function () {
+        volume.show();
+    });
+
+    // handler for seek change event to current time of audio
+    seekBar.change(function () {
+        audio.currentTime = $(this).val();
+    });
+
+    // handler for playback rate button click event
+    playbackRateBtn.click(function () {
+        playbackRateSet.show();
+    });
+
+    // handler for rates buttons click event
+    playbackRateSet.children().click(function () {
+        // getting new playback rate
+        var newRate = parseFloat($(this).attr('rate'));
+        // setting ne playback rate
+        audio.playbackRate = newRate;
+
+        // updating the play back rate button state
+        playbackRateBtn.html($(this).html());
+        //updating  rates state
+        playbackRateSet.hide();
+    });
+
+
+    // reference of seek bar
+    var seekbar = document.getElementById('seekbar');
+
+    // this event is fired when the duration attribute has been updated
+    audio.addEventListener('durationchange', function() {
+        seekbar.min = 0;
+        seekbar.max = audio.duration;
+        seekbar.value = 0;
+    });
+
+    // this event is fired when the time indicated by the currentTime attribute has been updated.
+    audio.addEventListener('timeupdate', function() {
+        var sec = audio.currentTime;
+        var h = Math.floor(sec / 3600);
+        sec = sec % 3600;
+        var min = Math.floor(sec / 60);
+        sec = Math.ceil(sec % 60);
+        if (sec.toString().length < 2) {sec = "0" + sec;}
+        if (min.toString().length < 2) {min = "0" + min;}
+        timer.html(h + ":" + min + ":" + sec);
+        seekbar.min = audio.startTime;
+        seekbar.max = audio.duration;
+        seekbar.value = audio.currentTime;
+    });
+
+    // this event is fired when playback has stopped.
+    audio.addEventListener('ended', function() {
+        playBtn.show();
+        pauseBtn.hide();
+    });
+
+    // out side click handler for playback rate set and volume controller
+    $(document).mouseup(function(e) {
+        if (!playbackRateSet.is(e.target)) {
+            playbackRateSet.hide();
+        }
+        if (!volume.is(e.target)) {
+            volume.hide();
+        }
+    });
+
+    //______________
+
+    document.getElementById("transcript-embed").height = "100%";
+
+}
+
+
+
+
diff --git a/audio/static/js/src/audio_edit.js b/audio/static/js/src/audio_edit.js
index 42a7543..d10e11e 100644
--- a/audio/static/js/src/audio_edit.js
+++ b/audio/static/js/src/audio_edit.js
@@ -2,7 +2,9 @@ function AudioEditBlock(runtime, element) {
   $(element).find('.save-button').bind('click', function() {
     var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
     var data = {
-      src: $(element).find('input[name=audio_src]').val()
+      src: $(element).find('input[name=audio_src]').val(),
+      downloadable_src: $(element).find('input[name=audio_src_downloadable]').val(),
+      transcript_src: $(element).find('input[name=transcript_src]').val()
     };
     $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
       window.location.reload(false);

From 430a3a5ebe3bb82dcec1ec4fff3b49847fd2c092 Mon Sep 17 00:00:00 2001
From: Tariq Rasheed <tariq.rasheed@arbisoft.com>
Date: Fri, 22 Sep 2017 16:51:02 +0500
Subject: [PATCH 2/7] Transcript feature with custom audio player (#2)

* basic transcript feature completed

* README file udated

* directories cleaned

* style problems fixed

* firefox problem fixed, completed

* downloads, bg-img, btn-style, automatic-play fixed
---
 README.md                         |  1 -
 audio/audio.py                    |  1 -
 audio/static/css/audio.scss       | 17 +++++++++--------
 audio/static/html/audio.html      |  6 +++---
 audio/static/html/audio_edit.html | 10 ++++++++--
 audio/static/js/src/audio.js      |  9 ++-------
 6 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/README.md b/README.md
index 946c6da..d7ce18c 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,4 @@
 AudioXBlock
-===========
 
 This is a simple XBlock which will play audio files as an HTML5 audio
 element and render the transcript as plain text. If unavailable, it will fall back to an embed element.
diff --git a/audio/audio.py b/audio/audio.py
index cc69d80..c0069ba 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -36,7 +36,6 @@ def student_view(self, context=None):
         html = self.resource_string("static/html/audio.html")
         frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
         frag.add_css(self.resource_string("static/css/audio.scss"))
-
         js = self.resource_string("static/js/src/audio.js")
         frag.add_javascript(js)
         frag.initialize_js('AudioXBlock')
diff --git a/audio/static/css/audio.scss b/audio/static/css/audio.scss
index 270f405..f489169 100644
--- a/audio/static/css/audio.scss
+++ b/audio/static/css/audio.scss
@@ -80,10 +80,11 @@
     width: 100%;
 }
 
-.audio-img img {
+.audio-img {
     width: 100%;
-    height: auto;
-    display: block;
+    height: 300px;
+    background: #f9f9f9 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAfAAAAEhCAIAAAAPrGU7AAAAA3NCSVQICAjb4U/gAAAAEHRFWHRTb2Z0d2FyZQBTaHV0dGVyY4LQCQAADU9JREFUeNrt3dlS48i6gFGNnk2//2sWtiRb07nQaU6d2LGD+hNMeVjrrjvAgHF9TlKpzPxyuWQAPL7CUwAg6AAIOgCCDoCgAwg6AIIOgKADIOgAgg6AoAMg6AAIOgCCDiDoAAg6AIIOgKADCDoAgg6AoAMg6ACCDoCgAyDoAAg6AIIOIOgACDoAgg6AoAMIOgCCDoCgAyDoAIIOgKADIOgACDoAgg4g6AAIOgCCDoCgAwg6AIIOgKADIOgACDqAoAMg6AAIOgCCDiDoAAg6AIIOgKADCDoAgg6AoAMg6AAIOoCgAyDoAAg6AIIOIOgACDoAgg6AoAMIOgCCDoCgAyDoAAg6gKADIOgACDoAgg7waipPAU+v7/thGOZ5LstytVrlee45QdDh8TRNe7l0H/95vV73+31R+NuUJ+RlzXPXvPm95lmWDcPw69evvu89OQg6PFbNL//5/+d5Pp1OXdd5ihB0eOCaf2jb9nw+z/PsuULQ4YFrvrher6fTSdMRdHjsmi+GYXh/f5+myfOGoMMD13wxjuP7+/s4jp49BB3uRdd10ZovpmnSdAQd7sj1ek3+3Hme39/fh0HTEXS4h1fz124Xmuf5dDJOR9DhDmy326833TVSBB3+vrIs397e6rrWdAQdHl6e54fDYbfbfeVBpmmyPh1Bh7uwXq/f3t6+Mv0yjqP7SBF0uAtlWR6Px6pK30+07/u2td8Lgg738OIuisPhsFqtkh/hcum+shQSBB2+TZ7n+/1+u90mP8L5fB6GwTOJoMNd2Gw2X7lMajIdQYc7sl6v9/t92udO03Q+N55D7p8j6HgY0zS1bTsMQ1EUm80mut58mUw/n88JX7rvr5dLtV6v/Ra4Z3naZkbww8ZxPJ1Ov9/vs9vtEgp7vV7Tmp5l2T///OMwUu6ZVycPWfMsy5qmads2+lCr1Sp5Pj35nQAEHf5rzRdd1yVEdr1ep02eDMPgL1oEHb6/5otlCiW6CmW73aZt+dI0jW1eEHT4/pr/3vTQIy/r08uyTGp661eDoMP313zR933TxFYWLtt45Xke/cb6/tr3vV8Qgg7fX/PF5XLputjWK0VRpC1OT7gYC4LOizqfzwlT1W3bRrdeqes64QLpOI6ujiLo8LlpmpLPgUvYemW73SZMprdtZz8ABB0+ked5wtT2h+hczXKBNPpV5nkySEfQ4SaF/S21c3QhY1mWCTsydp1BOoIOn6nr+nhMP3JoGIauiw2f1+t1dOJlnmeDdAQdPldV5fF4TFsqnmVZ17WhyfQ8zxO2BDBIR9Dhz16dRfGVY+SapgnVtqqq6PFG8zw70ghBhz8dOB8Oh7Smj+MYXZmeMJNu1gVBh59oetd1oRWQy07r0bcNN44i6BBreto10uhdnZvNJrpo0iAdQYdY04/HY9LWK31oBJ3nefTe0b7vbcGIoEPkxVoUh8PhPgfpLo0i6LycaZqapjmdTtF14ouqqhKuW47jGApunufR5S5mXRB0Xss4jr9+/bpcLn3ft22TdqJbwvHQaYP06BtVdA8ZEHQeuOan0+n3heHX6zVtH9rdbhedEpmmKTRIL4oiOkg364Kg80I1/88rh13XJXSwKIq0uzpDHx+9NCroCDqvW/PF+XxO2Cx3tVpFJ16iC8arqgotlJzn2awLgs7r1vyj6Qk7ovzAXZ0J6xf9xhF0XrfmWdI9+lmWlWUZvXQZXTAenUYXdASdl675InqP/iJpwXiguUVRhLYcGMfRHUYIOk8oei5o0zTRL5FwV+flEvtToK4N0hF0XlvCuaDDMCTUMGHBeOgbW63q6E/ht4+gQ5awLD1hkB5dkB46ZEPQEXSe7oUVvzEni9+jv7j1WpTQ+shpmkyjI+g8m91ul7Dhbdpyl5teuqyq2KxL3xukI+g8l2UT84RBesKsxU0H6VVVBn8EQUfQeTplWSbco5+wc2H0rtHo+dHRvwD86hF0ntB6vY6eHne9XqM3jkY3vI1Oo4d+BNdFEXSeVsI9+gnrF0OD9HmeQ+Po0EIXg3QEnadVVdUPbEUbn3UZQz9C6MEtdEHQeVoJm64kzLqExtGhS5dFUYT2GDBCR9B5WtGVhdERdMI4Otrc4LuFoCPoPK/oysJhCE+j30/QTbkg6DyzhPMobhr0eZ5D2TVCR9Dhf+V5Hmp6wuK/6I2p4zjd6MHneU44sgMEneccpEdH0Anj6GkKjKOj7xaCjqDzzKLXRRMmLm430y3oCDr8v9reevFfdGLkzz84z/PQN++6KILO8zf9pk0MBT36+MGgG6Ej6Dz3C+5mI+ik5k63/OaN0BF0jND/FVqF8gNvGNEDqUHQeWahJt56kHvToLsoiqDz9EG/oykXzUXQ4YcGxQlTHLd+fBB0+AhuYBYlNJxP+nMhD37z3i0QdPhX8F6e+xqhm6JB0OH/hO4Vit6cmd345s/QgxuhI+gI+s8F/cZTLv5xIeg8r2maQk28qxF6dAPFhPkiEHQeRt/HdsSNHs1866DH/mkV/nEh6Dyv6CFECUG/3ZTOTTd+AUHn4UbogaBH99rN4lM6tzuEKLo1Iwg6D1bzUG0Tgh465CjP89uN0Iui9BtH0Hla1+s19PF3Nd8SffCy9C8LQedJTdMUDXr0UOnoCD36hjEMt11wCYLOY+i6LvTxVVUlLBIPBT00pTNNU2jTAlMuCDpPOzy/XC7B4fkq+lVCV1yjQY/uzF5Vgo6g84zato1+ymoVnm+JBj00KxJdcGnKBUHnCfV9nzB7Hg3iPM+hoNd1fbvjqqNnYYOg8wDmeW6aJvpZ6/U6+inDMNxuTeRNZ+dB0HkMp9Mp4SDmhPUtN11CM47j7e5XAkHnAbRtGxrY/js830Q/JbomsiiKUHOjP4UROoLOU5nnObpUMcuyPC/W6/D6lujwfLWKfYnQ7Hye50boCDpPJTrTsthuNwnLz+OL3OvQ45tAR9B57RdWUUTTXJZldOy8DM+j506EFonfdHk7CDoPIM/z/X4fHJ5vf2B4vl6vQl/lB3YsAEHn3tV1fTgc/vCDV6tV2uKW6NxO6I+A6PL26OVWEHSerel5nu92u+iDz/McvQe1qqpQcKPzLYbnCDqv3vT9fp9wa2XbttFj4aK3LEXncwQdQeelm77ZbJJ2yh2jG35Fb1kaxzF6SpErogg6r9v0uq6322300eZ5bppz9LPW63Xo74D4DpG1LVwQdF606WVZRlfCLNq2DY2dl+FzaL5lnudb368Egs5jN/14PC6HV6xWq+PxmDCk7fs+OnbOsmyz2USH58Hl7eZb+Pu8BPnZF1xVHY/H5E+fpul8Dk+2JAzPo+8Z0fkcMELnpc3zfDqdoitbsvgtS7de3g6CzqvX/Hw+R6fOsywryzI6PE84AdX9RAg6/KmmaaK3+XwMz0MfnzA8TziRAwSdF3U+N9E1Jx+pDa09T7j7NM8L9xNxJ1wU5a4thb1eLwmfm+f5ZhM7LqPruvjdpyuXQxF0+Lzm5/M5baYly7Ldbhc6bHocx4RDOaLvGSDovJxlhWLCIXaL1WoVXXkSnWzJrFZE0OFPBssJB0x/KMsyun3j9XpN+FPA8Jy74qIod2eZaUmueZZlu11s+8ZpmpqmSRieh6Z0QNB5xaAnrDf/sN/vQ4fMZVnWNE3C/UqG5wg6fCLP8+SJ6c1mE506v1wuaZMthucIOnwe9LRdGOu6jo6ah2FMmGxJWBAJgs6LCp1HuqiqKnry0TzP5/Mp4dtLOM8aBB1N/yNlWR4Oh2hk0y69VlXlXn8EHW7S9LIsE7ZWb9s2dXOYnV8Ngg7f3/Rlg/Voza/Xa8JNoVmWrdfr6BIaEHT4vOlVVSXMtPR9n3BKRpZlRVEknIAKgg6fNH21WiXUfBiG0+mU9m1EL7qCoMN/bfpyjkSe59vtNiGvX6n5er12aih3zguUR2p6XdfzPKcNk4dhTDvBLsuysixNtiDo8M1Saz4k1zwz2YKgw53o+z55pmWpuSNDEXT4+y6XS8LN/R/W6/DmMCDo8M2W4+sul0vyI9R1vd3aswVBh7/qiwceZVlWlqWpcwQd/rJhGL54REae5wmL3EHQ4Tu1bdd17Rcf5HA42O4cQYe/5uvTLB81dw8Rj8gYhGcam7ffUvO6rj2ZCDr8TcMwfvER9vu9miPo8PfV9ZfmSQ6HgyXnCDrche12mzy+NtOCoMMdWU6XTuiymiPo8PBNL4ri7e1NzRF0eOymL4eR2ngLQYfHbnpd18fj0d1DCDo8dtO32607+xF0eOymL5u0bDb2UOQZX/Nf2VwU7t88z13X9X0/z1lVldvt1jQLgg7AXTNUARB0AAQdAEEHQNABBB0AQQdA0AEQdABBB0DQARB0AAQdAEEHEHQABB0AQQdA0AEEHQBBB0DQARB0AEEHQNABEHQABB0AQQcQdAAEHQBBB0DQAQQdAEEHQNABEHQAQfcUAAg6AIIOgKADIOgAgg6AoAMg6AAIOoCgAyDoAAg6AIIOgKADCDoAgg6AoAMg6ACCDoCgAyDoAAg6gKADIOgACDoAgg6AoAMIOgCCDoCgAyDoAIIOwIP5H0XWOZwJ5N7FAAAAAElFTkSuQmCC');
+    background-position: 50% 50%;
 }
 .progress-bar {
     height: 6px;
@@ -155,7 +156,7 @@
 }
 .speed-holder {
     float: left;
-    width: 105px;
+    width: 110px;
     padding: 0 0 0 20px;
     position: relative;
 }
@@ -258,7 +259,7 @@ input[type=range].slider::-webkit-slider-runnable-track {
 input[type=range].slider::-webkit-slider-thumb {
   height: 5px;
   width: 10px;
-  background: white;
+  background: #ddd;
   cursor: pointer;
   -webkit-appearance: none;
   margin-top: 0px;
@@ -275,7 +276,7 @@ input[type=range].slider::-moz-range-track {
 input[type=range].slider::-moz-range-thumb {
   height: 10px;
   width: 5px;
-  background: white;
+  background:#ddd;
   cursor: pointer;
 }
 input[type=range].slider::-ms-track {
@@ -299,10 +300,10 @@ input[type=range].slider::-ms-thumb {
   height: 5px;
 }
 input[type=range].slider:focus::-ms-fill-lower {
-  background: white;
+  background: #ddd;
 }
 input[type=range].slider:focus::-ms-fill-upper {
-  background: white;
+  background: #ddd;
 }
 .seekbar-style {
     z-index: 99;
diff --git a/audio/static/html/audio.html b/audio/static/html/audio.html
index 6ff8bc5..c7cd5a4 100644
--- a/audio/static/html/audio.html
+++ b/audio/static/html/audio.html
@@ -1,7 +1,7 @@
 <div class="row audio_block">
     <div class="col-6">
         <div class="audio-img">
-            <img src="http://placehold.it/570x200" alt="">
+
         </div>
         <div class="progress-bar">
             <input type="range" step="any" id="seekbar" class="slider seekbar-style">
@@ -45,8 +45,8 @@
         </audio>
         <h4>Downloads:</h4>
         <div class="download-links">
-            <a href="{transcript_src}">Transcript(.txt)</a>
-            <a href="{downloadable_src}">Audio(.mp3)</a>
+            <a href="{transcript_src}" download>Transcript(.txt)</a>
+            <a href="{downloadable_src}" download>Audio(.mp3)</a>
         </div>
     </div>
     <div class="col-6">
diff --git a/audio/static/html/audio_edit.html b/audio/static/html/audio_edit.html
index 85d43f4..536932e 100644
--- a/audio/static/html/audio_edit.html
+++ b/audio/static/html/audio_edit.html
@@ -20,7 +20,13 @@
     </li>
   </ul>
   <div class="row module-actions">
-      <a href="#" class="save-button action-primary action">Save</a>
-      <a href="#" class="cancel-button action-secondary action">Cancel</a>
+    <ul>
+      <li class="action-item">
+        <a href="#" class="button action-primary action-save save-button">Save</a>
+      </li>
+      <li class="action-item">
+        <a href="#" class="button  action-cancel cancel-button">Cancel</a>
+      </li>
+    </ul>
   </div>
 </div>
\ No newline at end of file
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index a721cc5..c0ef654 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -19,7 +19,6 @@ function AudioXBlock(runtime, element) {
     // loading the meta data for audio file, e.g. audio length, and playing automatically
     audio.addEventListener('loadedmetadata', function() {
         bufferIncrement = bufferingCanvas.width / audio.duration;
-        audio.play();
     });
 
 
@@ -67,7 +66,7 @@ function AudioXBlock(runtime, element) {
     var timer = $('#timer');
 
     // setting up initial state of player
-    playBtn.hide();
+    pauseBtn.hide();
     volume.val(audio.volume);
     playbackRateSet.hide();
     volume.hide();
@@ -88,7 +87,7 @@ function AudioXBlock(runtime, element) {
     });
 
     // volume handler
-    volume.change(function () {
+    volume.bind('mousemove', function () {
         audio.volume = $(this).val();
         if (audio.volume == 0) {
             audio.muted = true;
@@ -172,7 +171,3 @@ function AudioXBlock(runtime, element) {
     document.getElementById("transcript-embed").height = "100%";
 
 }
-
-
-
-

From dfe03a3b105d8a7faf6c67f15927bb485d8fef30 Mon Sep 17 00:00:00 2001
From: tariqqrasheedd <tariq.rasheed@arbisoft.com>
Date: Sat, 23 Sep 2017 14:34:01 +0500
Subject: [PATCH 3/7] save cancel button style

---
 audio/audio.py                    |   9 ++-
 audio/static/css/audio_edit.scss  |   3 +
 audio/static/html/audio_edit.html |  12 +---
 audio/static/js/src/audio.js      | 113 +++++++++++++++---------------
 audio/static/js/src/audio_edit.js |   4 +-
 5 files changed, 69 insertions(+), 72 deletions(-)
 create mode 100644 audio/static/css/audio_edit.scss

diff --git a/audio/audio.py b/audio/audio.py
index c0069ba..33786f5 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -47,7 +47,7 @@ def studio_view(self, context):
         """
         html = self.resource_string("static/html/audio_edit.html")
         frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
-
+        frag.add_css(self.resource_string("static/css/audio_edit.scss"))
         js = self.resource_string("static/js/src/audio_edit.js")
         frag.add_javascript(js)
         frag.initialize_js('AudioEditBlock')
@@ -73,9 +73,12 @@ def workbench_scenarios():
         return [
             ("AudioXBlock",
              """<vertical_demo>
-                    <audio src="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" 
+                    <audio src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" 
+                    transcript_src="http://norvig.com/big.txt"
+                    downloadable_src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"> </audio>
+                    <audio src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" 
                     transcript_src="http://norvig.com/big.txt"
                     downloadable_src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"> </audio>
-                </vertical_demo>
+                 </vertical_demo>
              """),
         ]
diff --git a/audio/static/css/audio_edit.scss b/audio/static/css/audio_edit.scss
new file mode 100644
index 0000000..83f422b
--- /dev/null
+++ b/audio/static/css/audio_edit.scss
@@ -0,0 +1,3 @@
+.wrapper-modal-window-edit-xblock .edit-xblock-modal .modal-actions {
+  display: block !important;
+}
\ No newline at end of file
diff --git a/audio/static/html/audio_edit.html b/audio/static/html/audio_edit.html
index 536932e..424d538 100644
--- a/audio/static/html/audio_edit.html
+++ b/audio/static/html/audio_edit.html
@@ -19,14 +19,4 @@
       </div>
     </li>
   </ul>
-  <div class="row module-actions">
-    <ul>
-      <li class="action-item">
-        <a href="#" class="button action-primary action-save save-button">Save</a>
-      </li>
-      <li class="action-item">
-        <a href="#" class="button  action-cancel cancel-button">Cancel</a>
-      </li>
-    </ul>
-  </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index c0ef654..2e46c47 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -1,30 +1,47 @@
 function AudioXBlock(runtime, element) {
 
     // reference of main audio file
-    var audio = document.getElementById("audio");
-
+    var audio = $(element).find('#audio');
     // reference of buffering canvas, that indicates audio file buffered progress
-    var bufferingCanvas = document.getElementById('buffering-canvas');
+    var bufferingCanvas = $(element).find('#buffering-canvas');
     // context of buffering canvas
-    var bufferingCanvasContext = bufferingCanvas.getContext('2d');
+    var bufferingCanvasContext = bufferingCanvas[0].getContext('2d');
     // variable that will hold the incremental progress for buffering canvas
     var bufferIncrement;
 
     // reference of play bar canvas, that indicates the progress of playing audio file
-    var playBarCanvas = document.getElementById('play-bar');
+    var playBarCanvas =$(element).find('#play-bar');
     // context of play bar canvas
-    var playBarContext = playBarCanvas.getContext('2d');
+    var playBarContext = playBarCanvas[0].getContext('2d');
+
+
+    // Getting DOM references with JQuery
+    var playBtn = $(element).find('#play-btn');
+    var volume = $(element).find('#volume');
+    var playbackRateSet = $(element).find('#speed');
+    var playbackRateBtn = $(element).find('#playback-rate-controller');
+    var pauseBtn = $(element).find('#pause-btn');
+    var volumeBtn = $(element).find('#volume-controller');
+    var seekBar = $(element).find('#seekbar');
+    var timer = $(element).find('#timer');
+
+    // setting up initial state of player
+    pauseBtn.hide();
+    volume.val(audio[0].volume);
+    playbackRateSet.hide();
+    volume.hide();
+    seekBar.value = 0;
 
 
     // loading the meta data for audio file, e.g. audio length, and playing automatically
-    audio.addEventListener('loadedmetadata', function() {
-        bufferIncrement = bufferingCanvas.width / audio.duration;
+    audio.bind('loadedmetadata', function() {
+        bufferIncrement = bufferingCanvas[0].width / audio[0].duration;
     });
 
 
     // setting up the buffering canvas
     bufferingCanvasContext.fillStyle = '#4F595D';
-    bufferingCanvasContext.fillRect(0, 0, bufferingCanvas.width, bufferingCanvas.height);
+    bufferingCanvasContext.fillRect(0, 0, bufferingCanvas[0].width, bufferingCanvas[0].height);
     bufferingCanvasContext.fillStyle = '#697275';
 
     //setting up the play bar canvas
@@ -32,67 +49,51 @@ function AudioXBlock(runtime, element) {
 
 
     // this event will fired when the time indicated by the currentTime attribute has been updated.
-    audio.addEventListener('timeupdate', function() {
-      for ( var i = 0; i < audio.buffered.length; i++) {
-        var startX = audio.buffered.start(i) * bufferIncrement;
-        var endX = audio.buffered.end(i) * bufferIncrement;
+    audio.bind('timeupdate', function() {
+      for ( var i = 0; i < audio[0].buffered.length; i++) {
+        var startX = audio[0].buffered.start(i) * bufferIncrement;
+        var endX = audio[0].buffered.end(i) * bufferIncrement;
         var width = endX - startX;
         // keep updating the buffered canvas
-        bufferingCanvasContext.fillRect(startX, 0, width, bufferingCanvas.height);
-        bufferingCanvasContext.rect(startX, 0, width, bufferingCanvas.height);
+        bufferingCanvasContext.fillRect(startX, 0, width, bufferingCanvas[0].height);
+        bufferingCanvasContext.rect(startX, 0, width, bufferingCanvas[0].height);
       }
         // calculating the playing progress in percentage
-        var playedAudio  = (audio.currentTime / audio.duration ) * 100;
+        var playedAudio  = (audio[0].currentTime / audio[0].duration ) * 100;
         // keep updating the play bar canvas
-        playBarContext.fillRect(0, 0, playedAudio, playBarCanvas.height);
+        playBarContext.fillRect(0, 0, playedAudio, playBarCanvas[0].height);
     });
 
     /*
     this event is fired when a seek operation completed.
     this event is needed to clear the play bar canvas whenever user seek.
     */
-    audio.addEventListener('seeked', function() {
-        playBarContext.clearRect(0,0,playBarCanvas.width, playBarCanvas.height);
+    audio.bind('seeked', function() {
+        playBarContext.clearRect(0,0,playBarCanvas[0].width, playBarCanvas[0].height);
      });
 
-    // Getting DOM references with JQuery
-    var playBtn = $('#play-btn');
-    var volume = $('#volume');
-    var playbackRateSet = $('#speed');
-    var playbackRateBtn = $('#playback-rate-controller');
-    var pauseBtn = $('#pause-btn');
-    var volumeBtn = $('#volume-controller');
-    var seekBar = $('#seekbar');
-    var timer = $('#timer');
-
-    // setting up initial state of player
-    pauseBtn.hide();
-    volume.val(audio.volume);
-    playbackRateSet.hide();
-    volume.hide();
-
 
     // handler for play button click event
     playBtn.click(function () {
-        audio.play();
+        audio[0].play();
         $(this).hide();
         pauseBtn.show();
     });
 
     // handler for pause button click event
     pauseBtn.click(function () {
-        audio.pause();
+        audio[0].pause();
         $(this).hide();
         playBtn.show();
     });
 
     // volume handler
     volume.bind('mousemove', function () {
-        audio.volume = $(this).val();
-        if (audio.volume == 0) {
-            audio.muted = true;
+        audio[0].volume = $(this).val();
+        if (audio[0].volume == 0) {
+            audio[0].muted = true;
         } else {
-            audio.muted = false;
+            audio[0].muted = false;
         }
     });
 
@@ -103,7 +104,7 @@ function AudioXBlock(runtime, element) {
 
     // handler for seek change event to current time of audio
     seekBar.change(function () {
-        audio.currentTime = $(this).val();
+        audio[0].currentTime = $(this).val();
     });
 
     // handler for playback rate button click event
@@ -116,7 +117,7 @@ function AudioXBlock(runtime, element) {
         // getting new playback rate
         var newRate = parseFloat($(this).attr('rate'));
         // setting ne playback rate
-        audio.playbackRate = newRate;
+        audio[0].playbackRate = newRate;
 
         // updating the play back rate button state
         playbackRateBtn.html($(this).html());
@@ -126,18 +127,18 @@ function AudioXBlock(runtime, element) {
 
 
     // reference of seek bar
-    var seekbar = document.getElementById('seekbar');
+    var seekbar = $(element).find('#seekbar');
 
     // this event is fired when the duration attribute has been updated
-    audio.addEventListener('durationchange', function() {
-        seekbar.min = 0;
-        seekbar.max = audio.duration;
-        seekbar.value = 0;
+    audio.bind('durationchange', function() {
+        seekbar[0].min = 0;
+        seekbar[0].max = audio[0].duration;
+        seekbar[0].value = 0;
     });
 
     // this event is fired when the time indicated by the currentTime attribute has been updated.
-    audio.addEventListener('timeupdate', function() {
-        var sec = audio.currentTime;
+    audio.bind('timeupdate', function() {
+        var sec = audio[0].currentTime;
         var h = Math.floor(sec / 3600);
         sec = sec % 3600;
         var min = Math.floor(sec / 60);
@@ -145,13 +146,13 @@ function AudioXBlock(runtime, element) {
         if (sec.toString().length < 2) {sec = "0" + sec;}
         if (min.toString().length < 2) {min = "0" + min;}
         timer.html(h + ":" + min + ":" + sec);
-        seekbar.min = audio.startTime;
-        seekbar.max = audio.duration;
-        seekbar.value = audio.currentTime;
+        seekbar[0].min = audio[0].startTime;
+        seekbar[0].max = audio[0].duration;
+        seekbar[0].value = audio[0].currentTime;
     });
 
     // this event is fired when playback has stopped.
-    audio.addEventListener('ended', function() {
+    audio.bind('ended', function() {
         playBtn.show();
         pauseBtn.hide();
     });
@@ -168,6 +169,6 @@ function AudioXBlock(runtime, element) {
 
     //______________
 
-    document.getElementById("transcript-embed").height = "100%";
-
+    var transcript = $(element).find('#transcript-embed');
+    transcript[0].height = "100%";
 }
diff --git a/audio/static/js/src/audio_edit.js b/audio/static/js/src/audio_edit.js
index d10e11e..3a63da7 100644
--- a/audio/static/js/src/audio_edit.js
+++ b/audio/static/js/src/audio_edit.js
@@ -1,5 +1,5 @@
 function AudioEditBlock(runtime, element) {
-  $(element).find('.save-button').bind('click', function() {
+  $(element).find('.action-save').bind('click', function() {
     var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
     var data = {
       src: $(element).find('input[name=audio_src]').val(),
@@ -11,7 +11,7 @@ function AudioEditBlock(runtime, element) {
     });
   });
 
-  $(element).find('.cancel-button').bind('click', function() {
+  $(element).find('.action-cancel').bind('click', function() {
     runtime.notify('cancel', {});
   });
 }
\ No newline at end of file

From 64996ab3aaaae5bf129b254d3ddea94182960990 Mon Sep 17 00:00:00 2001
From: tariqqrasheedd <tariq.rasheed@arbisoft.com>
Date: Sat, 23 Sep 2017 22:22:44 +0500
Subject: [PATCH 4/7] exception handling if edit form invalid

---
 audio/audio.py                    | 35 +++++++++++++++++++--------
 audio/static/html/audio.html      | 16 +++++++------
 audio/static/js/src/audio.js      | 37 +++++++++++++++++++++++++++-
 audio/static/js/src/audio_edit.js | 40 +++++++++++++++++++++----------
 4 files changed, 97 insertions(+), 31 deletions(-)

diff --git a/audio/audio.py b/audio/audio.py
index 33786f5..04897be 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -5,6 +5,16 @@
 from xblock.core import XBlock
 from xblock.fields import Scope, Integer, String
 from xblock.fragment import Fragment
+import re
+import requests
+
+regex = re.compile(
+        r'^(?:http|ftp)s?://' # http:// or https://
+        r'(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|' #domain...
+        r'localhost|' #localhost...
+        r'\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})' # ...or ip
+        r'(?::\d+)?' # optional port
+        r'(?:/?|[/?]\S+)$', re.IGNORECASE)
 
 
 class AudioXBlock(XBlock):
@@ -16,24 +26,33 @@ class AudioXBlock(XBlock):
     # self.<fieldname>.
 
     # this variable holds the source of main media file
-    src = String(scope=Scope.settings, help="URL for .ogg file to play")
+    src = String(scope=Scope.settings, help="URL for .ogg file to play", default="")
     # reference for script file
     transcript_src = String(scope=Scope.settings, help="plain text", default="")
     # holds the downloadable link of media file
-    downloadable_src = String(scope=Scope.settings, help="URL for .mp3 file to download")
+    downloadable_src = String(scope=Scope.settings, help="URL for .mp3 file to download", default="")
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
         data = pkg_resources.resource_string(__name__, path)
         return data.decode("utf8")
 
-    # TO-DO: change this view to display your data your own way.
     def student_view(self, context=None):
         """
         The primary view of the AudioXBlock, shown to students
         when viewing courses.
         """
         html = self.resource_string("static/html/audio.html")
+
+        # Validate Stuff
+        if not regex.match(self.transcript_src):
+            self.transcript_src = 'error'
+        else:
+            r = requests.get(self.transcript_src)
+            content_type = r.headers['content-type']
+            if "text/plain" != content_type:
+                self.transcript_src = 'error'
+
         frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
         frag.add_css(self.resource_string("static/css/audio.scss"))
         js = self.resource_string("static/js/src/audio.js")
@@ -65,7 +84,6 @@ def studio_submit(self, data, suffix=''):
 
         return {'result': 'success'}
 
-    # TO-DO: change this to create the scenarios you'd like to see in the
     # workbench while developing your XBlock.
     @staticmethod
     def workbench_scenarios():
@@ -73,12 +91,9 @@ def workbench_scenarios():
         return [
             ("AudioXBlock",
              """<vertical_demo>
-                    <audio src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" 
-                    transcript_src="http://norvig.com/big.txt"
-                    downloadable_src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"> </audio>
-                    <audio src="https://upload.wikimedia.org/wikipedia/en/9/9f/Sample_of_%22Another_Day_in_Paradise%22.ogg" 
-                    transcript_src="http://norvig.com/big.txt"
-                    downloadable_src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"> </audio>
+                    <audio src="" 
+                    transcript_src="http://humanstxt.org/humans.txt"
+                    downloadable_src=""> </audio>
                  </vertical_demo>
              """),
         ]
diff --git a/audio/static/html/audio.html b/audio/static/html/audio.html
index c7cd5a4..7ea2391 100644
--- a/audio/static/html/audio.html
+++ b/audio/static/html/audio.html
@@ -1,5 +1,6 @@
 <div class="row audio_block">
-    <div class="col-6">
+    <div class="col-6" id="audio-player-div">
+            <h4 class="hd hd-4 video-error" id="no-audio-source">No playable audio source found.</h4>
         <div class="audio-img">
 
         </div>
@@ -41,15 +42,16 @@
             </div>
         </div>
         <audio id="audio">
-            <source src="{src}" type="audio/ogg">
+            <source id="audio_src" src="{src}" type="audio/ogg">
         </audio>
-        <h4>Downloads:</h4>
-        <div class="download-links">
-            <a href="{transcript_src}" download>Transcript(.txt)</a>
-            <a href="{downloadable_src}" download>Audio(.mp3)</a>
+        <br>
+        <h4 id="downloads-heading">Downloads:</h4>
+        <div id="downloads-div" class="download-links">
+            <a id="transcript-link" href="{transcript_src}" download>Transcript ( .txt )</a>
+            <a id="audio-link" href="{downloadable_src}" download>Audio ( .mp3 )</a>
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-6" id="transcript-div-id">
         <embed id="transcript-embed" type="text/plain" src="{transcript_src}" class="col-12"></embed>
     </div>
 </div>
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index 2e46c47..d217008 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -24,6 +24,13 @@ function AudioXBlock(runtime, element) {
     var volumeBtn = $(element).find('#volume-controller');
     var seekBar = $(element).find('#seekbar');
     var timer = $(element).find('#timer');
+    var transcript = $(element).find('#transcript-embed');
+    var audioSrc = $(element).find('#audio_src').attr('src');
+    var audioDownloadableSrc = $(element).find('#audio-link').attr('href');
+
+    var noAudioSourceMessage = $(element).find('#no-audio-source')
+    var audioPlayerDiv = $(element).find('#audio-player-div');
+    var transcriptDiv = $(element).find('#transcript-div-id');
 
     // setting up initial state of player
     pauseBtn.hide();
@@ -32,6 +39,34 @@ function AudioXBlock(runtime, element) {
     volume.hide();
     seekBar.value = 0;
 
+    if(!audioSrc.endsWith('.ogg')){
+        noAudioSourceMessage.show();
+    }
+    else{
+        noAudioSourceMessage.hide();
+    }
+
+    if(!transcript.attr('src') && !audioDownloadableSrc) {
+        $(element).find('#downloads-div').hide();
+        $(element).find('#downloads-heading').hide();
+    } else if(!transcript.attr('src')){
+        $(element).find('#downloads-div').show();
+        $(element).find('#downloads-heading').show();
+        $(element).find('#transcript-link').hide();
+    } else if(!audioDownloadableSrc){
+        $(element).find('#downloads-div').show();
+        $(element).find('#downloads-heading').show();
+        $(element).find('#audio-link').hide();
+    }
+
+    if(!transcript.attr('src')){
+        transcriptDiv.hide();
+        audioPlayerDiv.removeClass('col-6');
+        audioPlayerDiv.addClass('col-12');
+    }
+
+    console.log(transcript.attr('src'));
+
 
     // loading the meta data for audio file, e.g. audio length, and playing automatically
     audio.bind('loadedmetadata', function() {
@@ -169,6 +204,6 @@ function AudioXBlock(runtime, element) {
 
     //______________
 
-    var transcript = $(element).find('#transcript-embed');
+
     transcript[0].height = "100%";
 }
diff --git a/audio/static/js/src/audio_edit.js b/audio/static/js/src/audio_edit.js
index 3a63da7..b9010a6 100644
--- a/audio/static/js/src/audio_edit.js
+++ b/audio/static/js/src/audio_edit.js
@@ -1,17 +1,31 @@
 function AudioEditBlock(runtime, element) {
-  $(element).find('.action-save').bind('click', function() {
-    var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
-    var data = {
-      src: $(element).find('input[name=audio_src]').val(),
-      downloadable_src: $(element).find('input[name=audio_src_downloadable]').val(),
-      transcript_src: $(element).find('input[name=transcript_src]').val()
-    };
-    $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
-      window.location.reload(false);
+
+    // var audioSrc = $(element).find('#audio_src');
+    // var audioSrcDownloadable = $(element).find('#audio_src_downloadable');
+    // var transcriptSrc = $(element).find('#transcript_src');
+    //
+    // audioSrc.on('input', function () {
+    //    if(audioSrc.val().endsWith('.ogg')) {
+    //        console.log("ok");
+    //    } else {
+    //        console.log("invalid");
+    //    }
+    // });
+
+    $(element).parents('.edit-xblock-modal').find('.action-save').unbind('click').bind('click', function(evt){
+        evt.preventDefault();
+        var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
+        var data = {
+            src: $(element).find('input[name=audio_src]').val(),
+            downloadable_src: $(element).find('input[name=audio_src_downloadable]').val(),
+            transcript_src: $(element).find('input[name=transcript_src]').val()
+        };
+        $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
+            runtime.notify('save', {state: 'end'});
+        });
     });
-  });
 
-  $(element).find('.action-cancel').bind('click', function() {
-    runtime.notify('cancel', {});
-  });
+    $(element).find('.action-cancel').bind('click', function() {
+        runtime.notify('cancel', {});
+    });
 }
\ No newline at end of file

From 882c0243dd873d32acab9bc093ec051ecf4134d4 Mon Sep 17 00:00:00 2001
From: tariqqrasheedd <tariq.rasheed@arbisoft.com>
Date: Mon, 25 Sep 2017 15:07:55 +0500
Subject: [PATCH 5/7] client side validation completed

---
 audio/audio.py                    | 21 +++++++++++++--------
 audio/static/html/audio.html      |  1 +
 audio/static/js/src/audio.js      | 26 +++++++++++++++++---------
 audio/static/js/src/audio_edit.js | 12 ------------
 4 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/audio/audio.py b/audio/audio.py
index 04897be..6989ba4 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -5,6 +5,7 @@
 from xblock.core import XBlock
 from xblock.fields import Scope, Integer, String
 from xblock.fragment import Fragment
+
 import re
 import requests
 
@@ -44,14 +45,15 @@ def student_view(self, context=None):
         """
         html = self.resource_string("static/html/audio.html")
 
-        # Validate Stuff
-        if not regex.match(self.transcript_src):
-            self.transcript_src = 'error'
-        else:
-            r = requests.get(self.transcript_src)
-            content_type = r.headers['content-type']
-            if "text/plain" != content_type:
+        # Validate transcript link.
+        if self.transcript_src:
+            if not regex.match(self.transcript_src):
                 self.transcript_src = 'error'
+            else:
+                r = requests.get(self.transcript_src)
+                content_type = r.headers['content-type']
+                if "text/plain" != content_type:
+                    self.transcript_src = 'error'
 
         frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
         frag.add_css(self.resource_string("static/css/audio.scss"))
@@ -91,8 +93,11 @@ def workbench_scenarios():
         return [
             ("AudioXBlock",
              """<vertical_demo>
-                    <audio src="" 
+                    <audio src="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" 
                     transcript_src="http://humanstxt.org/humans.txt"
+                    downloadable_src="sdfsdf.mp3"> </audio>
+                    <audio src="" 
+                    transcript_src=""
                     downloadable_src=""> </audio>
                  </vertical_demo>
              """),
diff --git a/audio/static/html/audio.html b/audio/static/html/audio.html
index 7ea2391..61cc4fb 100644
--- a/audio/static/html/audio.html
+++ b/audio/static/html/audio.html
@@ -52,6 +52,7 @@ <h4 id="downloads-heading">Downloads:</h4>
         </div>
     </div>
     <div class="col-6" id="transcript-div-id">
+        <h4 class="hd hd-4 video-error" id="no-transcript-source">No transcript source found.</h4>
         <embed id="transcript-embed" type="text/plain" src="{transcript_src}" class="col-12"></embed>
     </div>
 </div>
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index d217008..f1ca4b4 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -29,15 +29,20 @@ function AudioXBlock(runtime, element) {
     var audioDownloadableSrc = $(element).find('#audio-link').attr('href');
 
     var noAudioSourceMessage = $(element).find('#no-audio-source')
+    var noAudioTranscriptMessage = $(element).find('#no-transcript-source')
     var audioPlayerDiv = $(element).find('#audio-player-div');
     var transcriptDiv = $(element).find('#transcript-div-id');
+    var transcriptDownloadableLink = $(element).find('#transcript-link');
+    var downloadsHeading = $(element).find('#downloads-heading');
+    var downloadsDiv = $(element).find('#downloads-div');
 
     // setting up initial state of player
     pauseBtn.hide();
     volume.val(audio[0].volume);
     playbackRateSet.hide();
     volume.hide();
-    seekBar.value = 0;
+    seekBar[0].value = 0;
+    noAudioTranscriptMessage.hide();
 
     if(!audioSrc.endsWith('.ogg')){
         noAudioSourceMessage.show();
@@ -47,15 +52,15 @@ function AudioXBlock(runtime, element) {
     }
 
     if(!transcript.attr('src') && !audioDownloadableSrc) {
-        $(element).find('#downloads-div').hide();
-        $(element).find('#downloads-heading').hide();
+        downloadsDiv.hide();
+        downloadsHeading.hide();
     } else if(!transcript.attr('src')){
-        $(element).find('#downloads-div').show();
-        $(element).find('#downloads-heading').show();
-        $(element).find('#transcript-link').hide();
+        downloadsDiv.show();
+        downloadsHeading.show();
+        transcriptDownloadableLink.hide();
     } else if(!audioDownloadableSrc){
-        $(element).find('#downloads-div').show();
-        $(element).find('#downloads-heading').show();
+        downloadsDiv.show();
+        downloadsHeading.show();
         $(element).find('#audio-link').hide();
     }
 
@@ -65,8 +70,11 @@ function AudioXBlock(runtime, element) {
         audioPlayerDiv.addClass('col-12');
     }
 
-    console.log(transcript.attr('src'));
 
+    if(transcript.attr('src') === 'error'){
+        noAudioTranscriptMessage.show();
+        transcript.hide();
+    }
 
     // loading the meta data for audio file, e.g. audio length, and playing automatically
     audio.bind('loadedmetadata', function() {
diff --git a/audio/static/js/src/audio_edit.js b/audio/static/js/src/audio_edit.js
index b9010a6..d73b99f 100644
--- a/audio/static/js/src/audio_edit.js
+++ b/audio/static/js/src/audio_edit.js
@@ -1,17 +1,5 @@
 function AudioEditBlock(runtime, element) {
 
-    // var audioSrc = $(element).find('#audio_src');
-    // var audioSrcDownloadable = $(element).find('#audio_src_downloadable');
-    // var transcriptSrc = $(element).find('#transcript_src');
-    //
-    // audioSrc.on('input', function () {
-    //    if(audioSrc.val().endsWith('.ogg')) {
-    //        console.log("ok");
-    //    } else {
-    //        console.log("invalid");
-    //    }
-    // });
-
     $(element).parents('.edit-xblock-modal').find('.action-save').unbind('click').bind('click', function(evt){
         evt.preventDefault();
         var handlerUrl = runtime.handlerUrl(element, 'studio_submit');

From f1bb36a298ce659a5d9b73021c970c99a228496a Mon Sep 17 00:00:00 2001
From: Tariq Rasheed <tariq.rasheed@arbisoft.com>
Date: Mon, 25 Sep 2017 16:42:17 +0500
Subject: [PATCH 6/7] Client side validation (#3)

* client side validation completed
---
 audio/audio.py                    |  39 ++++++--
 audio/static/css/audio_edit.scss  |   3 +
 audio/static/html/audio.html      |  17 ++--
 audio/static/html/audio_edit.html |  12 +--
 audio/static/js/src/audio.js      | 154 +++++++++++++++++++-----------
 audio/static/js/src/audio_edit.js |  28 +++---
 6 files changed, 159 insertions(+), 94 deletions(-)
 create mode 100644 audio/static/css/audio_edit.scss

diff --git a/audio/audio.py b/audio/audio.py
index c0069ba..6989ba4 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -6,6 +6,17 @@
 from xblock.fields import Scope, Integer, String
 from xblock.fragment import Fragment
 
+import re
+import requests
+
+regex = re.compile(
+        r'^(?:http|ftp)s?://' # http:// or https://
+        r'(?:(?:[A-Z0-9](?:[A-Z0-9-]{0,61}[A-Z0-9])?\.)+(?:[A-Z]{2,6}\.?|[A-Z0-9-]{2,}\.?)|' #domain...
+        r'localhost|' #localhost...
+        r'\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})' # ...or ip
+        r'(?::\d+)?' # optional port
+        r'(?:/?|[/?]\S+)$', re.IGNORECASE)
+
 
 class AudioXBlock(XBlock):
     """
@@ -16,24 +27,34 @@ class AudioXBlock(XBlock):
     # self.<fieldname>.
 
     # this variable holds the source of main media file
-    src = String(scope=Scope.settings, help="URL for .ogg file to play")
+    src = String(scope=Scope.settings, help="URL for .ogg file to play", default="")
     # reference for script file
     transcript_src = String(scope=Scope.settings, help="plain text", default="")
     # holds the downloadable link of media file
-    downloadable_src = String(scope=Scope.settings, help="URL for .mp3 file to download")
+    downloadable_src = String(scope=Scope.settings, help="URL for .mp3 file to download", default="")
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
         data = pkg_resources.resource_string(__name__, path)
         return data.decode("utf8")
 
-    # TO-DO: change this view to display your data your own way.
     def student_view(self, context=None):
         """
         The primary view of the AudioXBlock, shown to students
         when viewing courses.
         """
         html = self.resource_string("static/html/audio.html")
+
+        # Validate transcript link.
+        if self.transcript_src:
+            if not regex.match(self.transcript_src):
+                self.transcript_src = 'error'
+            else:
+                r = requests.get(self.transcript_src)
+                content_type = r.headers['content-type']
+                if "text/plain" != content_type:
+                    self.transcript_src = 'error'
+
         frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
         frag.add_css(self.resource_string("static/css/audio.scss"))
         js = self.resource_string("static/js/src/audio.js")
@@ -47,7 +68,7 @@ def studio_view(self, context):
         """
         html = self.resource_string("static/html/audio_edit.html")
         frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
-
+        frag.add_css(self.resource_string("static/css/audio_edit.scss"))
         js = self.resource_string("static/js/src/audio_edit.js")
         frag.add_javascript(js)
         frag.initialize_js('AudioEditBlock')
@@ -65,7 +86,6 @@ def studio_submit(self, data, suffix=''):
 
         return {'result': 'success'}
 
-    # TO-DO: change this to create the scenarios you'd like to see in the
     # workbench while developing your XBlock.
     @staticmethod
     def workbench_scenarios():
@@ -74,8 +94,11 @@ def workbench_scenarios():
             ("AudioXBlock",
              """<vertical_demo>
                     <audio src="https://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg" 
-                    transcript_src="http://norvig.com/big.txt"
-                    downloadable_src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"> </audio>
-                </vertical_demo>
+                    transcript_src="http://humanstxt.org/humans.txt"
+                    downloadable_src="sdfsdf.mp3"> </audio>
+                    <audio src="" 
+                    transcript_src=""
+                    downloadable_src=""> </audio>
+                 </vertical_demo>
              """),
         ]
diff --git a/audio/static/css/audio_edit.scss b/audio/static/css/audio_edit.scss
new file mode 100644
index 0000000..83f422b
--- /dev/null
+++ b/audio/static/css/audio_edit.scss
@@ -0,0 +1,3 @@
+.wrapper-modal-window-edit-xblock .edit-xblock-modal .modal-actions {
+  display: block !important;
+}
\ No newline at end of file
diff --git a/audio/static/html/audio.html b/audio/static/html/audio.html
index c7cd5a4..61cc4fb 100644
--- a/audio/static/html/audio.html
+++ b/audio/static/html/audio.html
@@ -1,5 +1,6 @@
 <div class="row audio_block">
-    <div class="col-6">
+    <div class="col-6" id="audio-player-div">
+            <h4 class="hd hd-4 video-error" id="no-audio-source">No playable audio source found.</h4>
         <div class="audio-img">
 
         </div>
@@ -41,15 +42,17 @@
             </div>
         </div>
         <audio id="audio">
-            <source src="{src}" type="audio/ogg">
+            <source id="audio_src" src="{src}" type="audio/ogg">
         </audio>
-        <h4>Downloads:</h4>
-        <div class="download-links">
-            <a href="{transcript_src}" download>Transcript(.txt)</a>
-            <a href="{downloadable_src}" download>Audio(.mp3)</a>
+        <br>
+        <h4 id="downloads-heading">Downloads:</h4>
+        <div id="downloads-div" class="download-links">
+            <a id="transcript-link" href="{transcript_src}" download>Transcript ( .txt )</a>
+            <a id="audio-link" href="{downloadable_src}" download>Audio ( .mp3 )</a>
         </div>
     </div>
-    <div class="col-6">
+    <div class="col-6" id="transcript-div-id">
+        <h4 class="hd hd-4 video-error" id="no-transcript-source">No transcript source found.</h4>
         <embed id="transcript-embed" type="text/plain" src="{transcript_src}" class="col-12"></embed>
     </div>
 </div>
diff --git a/audio/static/html/audio_edit.html b/audio/static/html/audio_edit.html
index 536932e..424d538 100644
--- a/audio/static/html/audio_edit.html
+++ b/audio/static/html/audio_edit.html
@@ -19,14 +19,4 @@
       </div>
     </li>
   </ul>
-  <div class="row module-actions">
-    <ul>
-      <li class="action-item">
-        <a href="#" class="button action-primary action-save save-button">Save</a>
-      </li>
-      <li class="action-item">
-        <a href="#" class="button  action-cancel cancel-button">Cancel</a>
-      </li>
-    </ul>
-  </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index c0ef654..f1ca4b4 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -1,30 +1,90 @@
 function AudioXBlock(runtime, element) {
 
     // reference of main audio file
-    var audio = document.getElementById("audio");
-
+    var audio = $(element).find('#audio');
     // reference of buffering canvas, that indicates audio file buffered progress
-    var bufferingCanvas = document.getElementById('buffering-canvas');
+    var bufferingCanvas = $(element).find('#buffering-canvas');
     // context of buffering canvas
-    var bufferingCanvasContext = bufferingCanvas.getContext('2d');
+    var bufferingCanvasContext = bufferingCanvas[0].getContext('2d');
     // variable that will hold the incremental progress for buffering canvas
     var bufferIncrement;
 
     // reference of play bar canvas, that indicates the progress of playing audio file
-    var playBarCanvas = document.getElementById('play-bar');
+    var playBarCanvas =$(element).find('#play-bar');
     // context of play bar canvas
-    var playBarContext = playBarCanvas.getContext('2d');
+    var playBarContext = playBarCanvas[0].getContext('2d');
+
+
+    // Getting DOM references with JQuery
+    var playBtn = $(element).find('#play-btn');
+    var volume = $(element).find('#volume');
+    var playbackRateSet = $(element).find('#speed');
+    var playbackRateBtn = $(element).find('#playback-rate-controller');
+    var pauseBtn = $(element).find('#pause-btn');
+    var volumeBtn = $(element).find('#volume-controller');
+    var seekBar = $(element).find('#seekbar');
+    var timer = $(element).find('#timer');
+    var transcript = $(element).find('#transcript-embed');
+    var audioSrc = $(element).find('#audio_src').attr('src');
+    var audioDownloadableSrc = $(element).find('#audio-link').attr('href');
+
+    var noAudioSourceMessage = $(element).find('#no-audio-source')
+    var noAudioTranscriptMessage = $(element).find('#no-transcript-source')
+    var audioPlayerDiv = $(element).find('#audio-player-div');
+    var transcriptDiv = $(element).find('#transcript-div-id');
+    var transcriptDownloadableLink = $(element).find('#transcript-link');
+    var downloadsHeading = $(element).find('#downloads-heading');
+    var downloadsDiv = $(element).find('#downloads-div');
 
+    // setting up initial state of player
+    pauseBtn.hide();
+    volume.val(audio[0].volume);
+    playbackRateSet.hide();
+    volume.hide();
+    seekBar[0].value = 0;
+    noAudioTranscriptMessage.hide();
+
+    if(!audioSrc.endsWith('.ogg')){
+        noAudioSourceMessage.show();
+    }
+    else{
+        noAudioSourceMessage.hide();
+    }
+
+    if(!transcript.attr('src') && !audioDownloadableSrc) {
+        downloadsDiv.hide();
+        downloadsHeading.hide();
+    } else if(!transcript.attr('src')){
+        downloadsDiv.show();
+        downloadsHeading.show();
+        transcriptDownloadableLink.hide();
+    } else if(!audioDownloadableSrc){
+        downloadsDiv.show();
+        downloadsHeading.show();
+        $(element).find('#audio-link').hide();
+    }
+
+    if(!transcript.attr('src')){
+        transcriptDiv.hide();
+        audioPlayerDiv.removeClass('col-6');
+        audioPlayerDiv.addClass('col-12');
+    }
+
+
+    if(transcript.attr('src') === 'error'){
+        noAudioTranscriptMessage.show();
+        transcript.hide();
+    }
 
     // loading the meta data for audio file, e.g. audio length, and playing automatically
-    audio.addEventListener('loadedmetadata', function() {
-        bufferIncrement = bufferingCanvas.width / audio.duration;
+    audio.bind('loadedmetadata', function() {
+        bufferIncrement = bufferingCanvas[0].width / audio[0].duration;
     });
 
 
     // setting up the buffering canvas
     bufferingCanvasContext.fillStyle = '#4F595D';
-    bufferingCanvasContext.fillRect(0, 0, bufferingCanvas.width, bufferingCanvas.height);
+    bufferingCanvasContext.fillRect(0, 0, bufferingCanvas[0].width, bufferingCanvas[0].height);
     bufferingCanvasContext.fillStyle = '#697275';
 
     //setting up the play bar canvas
@@ -32,67 +92,51 @@ function AudioXBlock(runtime, element) {
 
 
     // this event will fired when the time indicated by the currentTime attribute has been updated.
-    audio.addEventListener('timeupdate', function() {
-      for ( var i = 0; i < audio.buffered.length; i++) {
-        var startX = audio.buffered.start(i) * bufferIncrement;
-        var endX = audio.buffered.end(i) * bufferIncrement;
+    audio.bind('timeupdate', function() {
+      for ( var i = 0; i < audio[0].buffered.length; i++) {
+        var startX = audio[0].buffered.start(i) * bufferIncrement;
+        var endX = audio[0].buffered.end(i) * bufferIncrement;
         var width = endX - startX;
         // keep updating the buffered canvas
-        bufferingCanvasContext.fillRect(startX, 0, width, bufferingCanvas.height);
-        bufferingCanvasContext.rect(startX, 0, width, bufferingCanvas.height);
+        bufferingCanvasContext.fillRect(startX, 0, width, bufferingCanvas[0].height);
+        bufferingCanvasContext.rect(startX, 0, width, bufferingCanvas[0].height);
       }
         // calculating the playing progress in percentage
-        var playedAudio  = (audio.currentTime / audio.duration ) * 100;
+        var playedAudio  = (audio[0].currentTime / audio[0].duration ) * 100;
         // keep updating the play bar canvas
-        playBarContext.fillRect(0, 0, playedAudio, playBarCanvas.height);
+        playBarContext.fillRect(0, 0, playedAudio, playBarCanvas[0].height);
     });
 
     /*
     this event is fired when a seek operation completed.
     this event is needed to clear the play bar canvas whenever user seek.
     */
-    audio.addEventListener('seeked', function() {
-        playBarContext.clearRect(0,0,playBarCanvas.width, playBarCanvas.height);
+    audio.bind('seeked', function() {
+        playBarContext.clearRect(0,0,playBarCanvas[0].width, playBarCanvas[0].height);
      });
 
-    // Getting DOM references with JQuery
-    var playBtn = $('#play-btn');
-    var volume = $('#volume');
-    var playbackRateSet = $('#speed');
-    var playbackRateBtn = $('#playback-rate-controller');
-    var pauseBtn = $('#pause-btn');
-    var volumeBtn = $('#volume-controller');
-    var seekBar = $('#seekbar');
-    var timer = $('#timer');
-
-    // setting up initial state of player
-    pauseBtn.hide();
-    volume.val(audio.volume);
-    playbackRateSet.hide();
-    volume.hide();
-
 
     // handler for play button click event
     playBtn.click(function () {
-        audio.play();
+        audio[0].play();
         $(this).hide();
         pauseBtn.show();
     });
 
     // handler for pause button click event
     pauseBtn.click(function () {
-        audio.pause();
+        audio[0].pause();
         $(this).hide();
         playBtn.show();
     });
 
     // volume handler
     volume.bind('mousemove', function () {
-        audio.volume = $(this).val();
-        if (audio.volume == 0) {
-            audio.muted = true;
+        audio[0].volume = $(this).val();
+        if (audio[0].volume == 0) {
+            audio[0].muted = true;
         } else {
-            audio.muted = false;
+            audio[0].muted = false;
         }
     });
 
@@ -103,7 +147,7 @@ function AudioXBlock(runtime, element) {
 
     // handler for seek change event to current time of audio
     seekBar.change(function () {
-        audio.currentTime = $(this).val();
+        audio[0].currentTime = $(this).val();
     });
 
     // handler for playback rate button click event
@@ -116,7 +160,7 @@ function AudioXBlock(runtime, element) {
         // getting new playback rate
         var newRate = parseFloat($(this).attr('rate'));
         // setting ne playback rate
-        audio.playbackRate = newRate;
+        audio[0].playbackRate = newRate;
 
         // updating the play back rate button state
         playbackRateBtn.html($(this).html());
@@ -126,18 +170,18 @@ function AudioXBlock(runtime, element) {
 
 
     // reference of seek bar
-    var seekbar = document.getElementById('seekbar');
+    var seekbar = $(element).find('#seekbar');
 
     // this event is fired when the duration attribute has been updated
-    audio.addEventListener('durationchange', function() {
-        seekbar.min = 0;
-        seekbar.max = audio.duration;
-        seekbar.value = 0;
+    audio.bind('durationchange', function() {
+        seekbar[0].min = 0;
+        seekbar[0].max = audio[0].duration;
+        seekbar[0].value = 0;
     });
 
     // this event is fired when the time indicated by the currentTime attribute has been updated.
-    audio.addEventListener('timeupdate', function() {
-        var sec = audio.currentTime;
+    audio.bind('timeupdate', function() {
+        var sec = audio[0].currentTime;
         var h = Math.floor(sec / 3600);
         sec = sec % 3600;
         var min = Math.floor(sec / 60);
@@ -145,13 +189,13 @@ function AudioXBlock(runtime, element) {
         if (sec.toString().length < 2) {sec = "0" + sec;}
         if (min.toString().length < 2) {min = "0" + min;}
         timer.html(h + ":" + min + ":" + sec);
-        seekbar.min = audio.startTime;
-        seekbar.max = audio.duration;
-        seekbar.value = audio.currentTime;
+        seekbar[0].min = audio[0].startTime;
+        seekbar[0].max = audio[0].duration;
+        seekbar[0].value = audio[0].currentTime;
     });
 
     // this event is fired when playback has stopped.
-    audio.addEventListener('ended', function() {
+    audio.bind('ended', function() {
         playBtn.show();
         pauseBtn.hide();
     });
@@ -168,6 +212,6 @@ function AudioXBlock(runtime, element) {
 
     //______________
 
-    document.getElementById("transcript-embed").height = "100%";
 
+    transcript[0].height = "100%";
 }
diff --git a/audio/static/js/src/audio_edit.js b/audio/static/js/src/audio_edit.js
index d10e11e..d73b99f 100644
--- a/audio/static/js/src/audio_edit.js
+++ b/audio/static/js/src/audio_edit.js
@@ -1,17 +1,19 @@
 function AudioEditBlock(runtime, element) {
-  $(element).find('.save-button').bind('click', function() {
-    var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
-    var data = {
-      src: $(element).find('input[name=audio_src]').val(),
-      downloadable_src: $(element).find('input[name=audio_src_downloadable]').val(),
-      transcript_src: $(element).find('input[name=transcript_src]').val()
-    };
-    $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
-      window.location.reload(false);
+
+    $(element).parents('.edit-xblock-modal').find('.action-save').unbind('click').bind('click', function(evt){
+        evt.preventDefault();
+        var handlerUrl = runtime.handlerUrl(element, 'studio_submit');
+        var data = {
+            src: $(element).find('input[name=audio_src]').val(),
+            downloadable_src: $(element).find('input[name=audio_src_downloadable]').val(),
+            transcript_src: $(element).find('input[name=transcript_src]').val()
+        };
+        $.post(handlerUrl, JSON.stringify(data)).done(function(response) {
+            runtime.notify('save', {state: 'end'});
+        });
     });
-  });
 
-  $(element).find('.cancel-button').bind('click', function() {
-    runtime.notify('cancel', {});
-  });
+    $(element).find('.action-cancel').bind('click', function() {
+        runtime.notify('cancel', {});
+    });
 }
\ No newline at end of file

From 86e407ef0fe28be22efc307890a92c11d3974eb7 Mon Sep 17 00:00:00 2001
From: tariqqrasheedd <tariq.rasheed@arbisoft.com>
Date: Mon, 25 Sep 2017 17:56:40 +0500
Subject: [PATCH 7/7] validation-2 completed

---
 audio/audio.py               | 16 +++++++++++-----
 audio/static/html/audio.html | 10 +++++-----
 audio/static/js/src/audio.js |  4 ++--
 3 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/audio/audio.py b/audio/audio.py
index 6989ba4..471fb72 100644
--- a/audio/audio.py
+++ b/audio/audio.py
@@ -32,6 +32,7 @@ class AudioXBlock(XBlock):
     transcript_src = String(scope=Scope.settings, help="plain text", default="")
     # holds the downloadable link of media file
     downloadable_src = String(scope=Scope.settings, help="URL for .mp3 file to download", default="")
+    is_transcript_url_valid = String(scope=Scope.settings, help="transcript url validation flag", default="True")
 
     def resource_string(self, path):
         """Handy helper for getting resources from our kit."""
@@ -48,14 +49,19 @@ def student_view(self, context=None):
         # Validate transcript link.
         if self.transcript_src:
             if not regex.match(self.transcript_src):
-                self.transcript_src = 'error'
+                self.transcript_src = ''
+                self.is_transcript_url_valid = "False"
             else:
                 r = requests.get(self.transcript_src)
                 content_type = r.headers['content-type']
                 if "text/plain" != content_type:
-                    self.transcript_src = 'error'
+                    self.transcript_src = ''
+                    self.is_transcript_url_valid = "False"
 
-        frag = Fragment(html.format(src=self.src, transcript_src=self.transcript_src, downloadable_src=self.downloadable_src))
+        frag = Fragment(html.format(src=self.src,
+                                    transcript_src=self.transcript_src,
+                                    downloadable_src=self.downloadable_src,
+                                    is_transcript_url_valid=self.is_transcript_url_valid))
         frag.add_css(self.resource_string("static/css/audio.scss"))
         js = self.resource_string("static/js/src/audio.js")
         frag.add_javascript(js)
@@ -97,8 +103,8 @@ def workbench_scenarios():
                     transcript_src="http://humanstxt.org/humans.txt"
                     downloadable_src="sdfsdf.mp3"> </audio>
                     <audio src="" 
-                    transcript_src=""
-                    downloadable_src=""> </audio>
+                    transcript_src="sdrfserf.txt"
+                    downloadable_src="fasdf.mp3"> </audio>
                  </vertical_demo>
              """),
         ]
diff --git a/audio/static/html/audio.html b/audio/static/html/audio.html
index 61cc4fb..f5caef4 100644
--- a/audio/static/html/audio.html
+++ b/audio/static/html/audio.html
@@ -1,6 +1,7 @@
 <div class="row audio_block">
     <div class="col-6" id="audio-player-div">
-            <h4 class="hd hd-4 video-error" id="no-audio-source">No playable audio source found.</h4>
+            <h3 class="hd hd-4 video-error" id="no-audio-source">* No playable audio source found.</h3>
+            <h3 class="hd hd-4 video-error" id="no-transcript-source">* Invalid transcript source.</h3>
         <div class="audio-img">
 
         </div>
@@ -47,12 +48,11 @@ <h4 class="hd hd-4 video-error" id="no-audio-source">No playable audio source fo
         <br>
         <h4 id="downloads-heading">Downloads:</h4>
         <div id="downloads-div" class="download-links">
-            <a id="transcript-link" href="{transcript_src}" download>Transcript ( .txt )</a>
-            <a id="audio-link" href="{downloadable_src}" download>Audio ( .mp3 )</a>
+            <a id="transcript-link" href="{transcript_src}" download>Transcript</a>
+            <a id="audio-link" href="{downloadable_src}" download>Audio (.mp3)</a>
         </div>
     </div>
     <div class="col-6" id="transcript-div-id">
-        <h4 class="hd hd-4 video-error" id="no-transcript-source">No transcript source found.</h4>
-        <embed id="transcript-embed" type="text/plain" src="{transcript_src}" class="col-12"></embed>
+        <embed is-transcript-url-valid="{is_transcript_url_valid}" id="transcript-embed" type="text/plain" src="{transcript_src}" class="col-12"></embed>
     </div>
 </div>
diff --git a/audio/static/js/src/audio.js b/audio/static/js/src/audio.js
index f1ca4b4..57491dc 100644
--- a/audio/static/js/src/audio.js
+++ b/audio/static/js/src/audio.js
@@ -70,10 +70,10 @@ function AudioXBlock(runtime, element) {
         audioPlayerDiv.addClass('col-12');
     }
 
-
-    if(transcript.attr('src') === 'error'){
+    if(transcript.attr('is-transcript-url-valid') === "False"){
         noAudioTranscriptMessage.show();
         transcript.hide();
+        transcriptDownloadableLink.show();
     }
 
     // loading the meta data for audio file, e.g. audio length, and playing automatically