Add audio repeat and use Digitalkhatt script in segments (#740)

Author: naveed-ahmad

app/controllers/surah_audio_files_controller.rb

@@ -104,7 +104,7 @@ def save_segments
           timestamp_from: segment.timestamp_from,
           timestamp_to: segment.timestamp_to,
           segments: segment.segments,
-          words: segment.verse.words.map(&:text_qpc_hafs)
+          words: segment.verse.words.map(&:text_digital_khatt)
         }
       }
     }

app/javascript/segments/components/ActionBar.vue

@@ -203,6 +203,22 @@
             </label>
           </div>
 
+          <div class="flex items-center">
+            <input
+                type="checkbox"
+                :checked="isLooingAyah"
+                @change="loopAyah"
+                id="repeat-ayah"
+                class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            <label for="repeat-ayah"
+                   class="ml-2 text-sm text-gray-700"
+                   data-controller="tooltip"
+                   title="If checked, player will keep repeating the current ayah instead of moving to the next one.">
+              Repeat ayah
+            </label>
+          </div>
+
           <div class="flex items-center">
             <input
                 type="checkbox"

app/javascript/segments/components/Timeline.vue

@@ -923,7 +923,7 @@ export default {
 
 <style scoped>
 .timeline{
-  font-family: qpc-hafs;
+  font-family: digitalkhatt-v2;
   font-size: 15px;
 }
 .tl-word {

app/javascript/segments/components/Verse.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-wrap">
     <div class="w-full" v-if="segmentsLoaded">
-      <div class="qpc-hafs flex flex-wrap gap-2 p-4 bg-gray-50 rounded-lg mb-6 sticky top-0 z-50 shadow-sm words">
+      <div class="digitalkhatt-v2 flex flex-wrap gap-2 p-4 bg-gray-50 rounded-lg mb-6 sticky top-0 z-50 shadow-sm words">
         <span
           :id="index + 1"
           :class="[this.getWordCssClass(index)]"
@@ -355,7 +355,7 @@
                   </small>
                 </td>
 
-                <td class="px-4  py-2 text-lg qpc-hafs">
+                <td class="px-4  py-2 text-lg digitalkhatt-v2">
                   {{ segmentText(segment) }}
                   <small class="block text-[10px] text-gray-400 mt-0.5" v-if="segmentDuration(segment)">
                     {{ segmentDuration(segment) }}

app/views/surah_audio_files/segments.json.jbuilder

@@ -12,7 +12,7 @@ json.segments do
       json.timestamp_from segment&.timestamp_from
       json.timestamp_to segment&.timestamp_to
       json.segments segment&.segments || []
-      json.set! :words, verse.words.map(&:text_qpc_hafs)
+      json.set! :words, verse.words.map(&:text_digital_khatt)
     end
   end
 end