From ced08101ed506b2506c135b76e55af22344a548b Mon Sep 17 00:00:00 2001
From: abdullahalmamun <abdullah@itclanbd.com>
Date: Wed, 6 Apr 2022 16:08:42 +0600
Subject: [PATCH] [Add] Audio supports and update readme

---
 README.md                       |  6 ++++
 src/components/CoolLightBox.vue | 63 +++++++++++++++++++++++++++++++--
 2 files changed, 67 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 91b4c0c..3a693f6 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,12 @@ export default {
 ## Docs
 You can see the complete documentation with examples here: [https://vue-cool-lightbox.lucaspulliese.com/](https://vue-cool-lightbox.lucaspulliese.com/).
 
+## Supported contents
+- Images
+- Videos
+- Audios (mp3, wav, ogg)
+- iFrames
+
 ## Contributing
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
 
diff --git a/src/components/CoolLightBox.vue b/src/components/CoolLightBox.vue
index 38d21b6..af5046f 100644
--- a/src/components/CoolLightBox.vue
+++ b/src/components/CoolLightBox.vue
@@ -168,7 +168,19 @@
                 poster="">
                 <source :src="checkIsMp4(getItemSrc(itemIndex))" :type="'video/'+(getVideoExt(getItemSrc(itemIndex)) ? getVideoExt(getItemSrc(itemIndex)) : getExtFromItem(itemIndex))">
                 Sorry, your browser doesn't support embedded videos
-              </video> 
+              </video>
+
+              <audio
+                  v-autoplayObserver
+                :data-autoplay="setAutoplay(itemIndex)"
+                class="cool-lightbox-video"
+                v-if="checkIsAudio(getItemSrc(itemIndex))"
+                :style="aspectRatioVideo" :key="checkIsAudio(getItemSrc(itemIndex))"
+                controls=""
+                controlslist="nodownload">
+                <source :src="checkIsAudio(getItemSrc(itemIndex))" :type="'audio/'+getAudioExt(getItemSrc(itemIndex))">
+                Sorry, your browser does not support the audio element
+              </audio>
             </div>
             <!--/cool-lightbox__iframe-->
           </div>
@@ -269,7 +281,19 @@
                     poster="">
                     <source :src="checkIsMp4(getItemSrc(imgIndex))" :type="'video/'+(getVideoExt(getItemSrc(imgIndex)) ? getVideoExt(getItemSrc(imgIndex)) : getExtFromItem(imgIndex))">
                     Sorry, your browser doesn't support embedded videos
-                  </video> 
+                  </video>
+
+                  <audio
+                      v-autoplayObserver
+                      :data-autoplay="setAutoplay(itemIndex)"
+                      class="cool-lightbox-video"
+                      v-if="checkIsAudio(getItemSrc(itemIndex))"
+                      :style="aspectRatioVideo" :key="checkIsAudio(getItemSrc(itemIndex))"
+                      controls=""
+                      controlslist="nodownload">
+                    <source :src="checkIsAudio(getItemSrc(itemIndex))" :type="'audio/'+getAudioExt(getItemSrc(itemIndex))">
+                    Sorry, your browser does not support the audio element
+                  </audio>
                 </transition>
               </div>
               <!--/cool-lightbox__iframe-->
@@ -1793,6 +1817,41 @@ export default {
       return false
     },
 
+    checkIsAudio(url) {
+      if(this.imgIndex === null) {
+        return false
+      }
+
+      const str = new String(url);
+      if(
+          (str.indexOf('.mp3') !== -1) ||
+          (str.indexOf('.ogg') !== -1) ||
+          (str.indexOf('.wav') !== -1)
+      ) {
+        return url
+      }
+
+      return false
+    },
+
+    // if is video get extension
+    getAudioExt(url) {
+      if(this.imgIndex === null) {
+        return false
+      }
+
+      const str = new String(url);
+      if(str.indexOf('.mp3') !== -1 || str.indexOf('.wav') !== -1){
+        return 'mpeg'
+      }
+
+      if(str.indexOf('.ogg') !== -1) {
+        return 'ogg'
+      }
+
+      return false
+    },
+
     // check if item is object
     checkIfIsObject(itemIndex) {
       const item = this.items[itemIndex]