Disable surah selector until first ayah is played

islamic-network · May 30, 2021 · 3271364 · 3271364
1 parent 0a4d095
commit 3271364
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/html/public/js/jquery.mediaplayer.js b/html/public/js/jquery.mediaplayer.js
@@ -85,10 +85,13 @@ jQuery( document ).ready( function( $ ) {
                     w.player.load();
                     w.player.oncanplaythrough = w.player.play();
                 }
-
                 if (w.firstPlayCompleted == false) {
+                    console.log('yes');
                     if ($('.playThisAyah').hasClass('hide')) {
-                        $('.playThisAyah').removeClass('hide');    
+                        $('.playThisAyah').removeClass('hide');
+                    }
+                    if ($('#surahSelector').attr('disabled') == 'disabled') {
+                        $('#surahSelector').attr('disabled', false);
                     }
                 }
                 $('.playThisAyah').on('click', function() {

diff --git a/html/public/js/jquery.quran.js b/html/public/js/jquery.quran.js
@@ -37,7 +37,6 @@ jQuery( document ).ready( function( $ ) {
 						// Now set surah to play normally
 						player.pause();
 						if (player.paused) {
-							//var url = 'https://cdn.islamic.network/quran/audio/128/ar.alafasy/' + ayah + '.mp3';
 							$("#playThisAyah" + ayah).trigger('click');
 						}
 					});

diff --git a/views/quran.php b/views/quran.php
@@ -44,7 +44,7 @@
 	<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
 		<form>
 			<div class="form-group">
-				<select id="surahSelector" name="surahSelector" title="Select Surah" class="form-control" >
+				<select id="surahSelector" name="surahSelector" title="Select Surah" class="form-control" disabled="disabled" >
                     <?php $surahChangers = []; $count=0; ?>
 					<?php foreach ($suwar->data as $ss) {
 					    $count = $count + $ss->numberOfAyahs;
@@ -60,7 +60,7 @@
 		<form class="align-center">
 			<div class="form-group">
 				<label for="editionSelector">Show translation </label>
-				<select id="editionSelector" name="editionSelector" multiple="multiple" title="Select Language" class="form-control" >
+				<select id="editionSelector" name="editionSelector" multiple="multiple" title="Select Language" class="form-control">
 					<?php foreach (Generic::getEditionsByLanguage($editions['editions']->data) as  $language => $edition) { ?>
 					<optgroup label="<?= $language; ?>">
 						<?php foreach ($edition as $e) { ?>
@@ -80,8 +80,8 @@
 </div>
 </div>
 </div>
-<script src="/public/js/jquery.mediaplayer.js?v=11"></script>
-<script src="/public/js/jquery.quran.js?v=1"></script>
+<script src="/public/js/jquery.mediaplayer.js?v=13"></script>
+<script src="/public/js/jquery.quran.js?v=2"></script>
 <script>
     var quran = <?php echo json_encode($quran->data); ?>;
     var surahChangers = <?php echo json_encode($surahChangers); ?>;