Merge pull request #12 from mindvalley/emit-error

Emit videojs error
mindvalley · Jul 31, 2023 · 7669758 · 7669758
2 parents fbd9cf9 + 64f896d
commit 7669758
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,7 @@ The components are grouped in below categories. Each category has its own reason
   - Carousel
 - **Utils**
   - Browser Detection
+  - Format Sources
 
 _Important_: When above components are consumed, they are used with **MV** prefix. It means, **AudioPlayer** becomes **MVAudioPlayer**.
 
@@ -123,6 +124,7 @@ This component represents the _virtual_ instance of a player. It means, that all
         @rewind="emitEvent('rewind', $event)"
         @fastforward="emitEvent('fastforward', $event)"
         @playbackSpeed="emitEvent('playbackSpeed', $event)"
+        @error="emitEvent('error', $event)"
         >
 
         <!-- Other code -->
@@ -491,6 +493,7 @@ You can think of this component as an extension to _AudioItem_ component because
         @fastforward="logEvent('fastforward', $event)"
         @playbackSpeed="logEvent('playbackSpeed', $event)"
         @favourite="logEvent('favourite', $event)"
+        @error="logEvent('error', $event)"
       >
 
         <!-- Other code-->
@@ -555,6 +558,10 @@ _**Usage**_
                   <MVMeditationTrackItem
                     :sources="formatSources(sound?.item?.mediaAsset.renditions)"
                     :background-src="sound?.item?.coverAsset?.thumbnailUrl"
+                    @play="logEvent('play', $event)"
+                    @pause="logEvent('pause', $event)"
+                    @timeupdate="logEvent('timeupdate', $event)"
+                    @error="logEvent('error', $event)"
                   />
                 </MVCarouselSlide>
               </MVCarousel>
@@ -617,6 +624,33 @@ It exposes below properties:
 - isiPad
 - isTouchDevice
 
+Usage:
+
+```
+import { useDetectBrowser } from "@mindvalley/mv-universal-player";
+
+const { isiPhone, isiPad, isiPhoneOriPadSafari } = useDetectBrowser();
+```
+
+**useGlobal**
+
+This composable clubs generic utitlity features. For example, it includes **formatSources** method to help format and priotize _.hls_ (for video) and _.mp4a_ (for audio) sources. So, let's say you pass a list of renditions which has _.mp4a_ as source, then this will be the _only_ source that would be considered. If not, then rest of the sources will be considered as fallback.
+
+Usage:
+
+```
+import { useGlobal } from "@mindvalley/mv-universal-player";
+
+const { formatSources } = useGlobal();
+```
+
+_formatSources_ accepts two parameters:
+
+| Name    | Type                                             | Default | Description                                                                                                                   |
+| ------- | ------------------------------------------------ | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
+| sources | [{id: string, contentType: string, url: string}] | []      | The list of sources which contains renditions.                                                                                |
+| isAudio | boolean                                          | true    | It is to identify whether the sources are of audio or video. For audio '.mp4a' is considered as priority and for video, .hls. |
+
 ## Package Configuration
 
 **Vue Version Support**

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@mindvalley/mv-universal-player",
-  "version": "1.0.8",
+  "version": "1.0.10",
   "author": {
     "name": "Mindvalley"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -27,6 +27,7 @@
         @playbackSpeed="logEvent('playbackSpeed', $event)"
         @favourite="logEvent('favourite', $event)"
         @timeupdate="logEvent('timeupdate', $event)"
+        @error="logEvent('error', $event)"
       >
         <template #audio-description>
           <MVAudioDescription
@@ -56,6 +57,7 @@
                     @play="logEvent('play', $event)"
                     @pause="logEvent('pause', $event)"
                     @timeupdate="logEvent('timeupdate', $event)"
+                    @error="logEvent('error', $event)"
                   />
                 </MVCarouselSlide>
               </MVCarousel>

diff --git a/src/components/audio/AudioItem/AudioItem.vue b/src/components/audio/AudioItem/AudioItem.vue
@@ -28,9 +28,21 @@ const emit = defineEmits<{
   (e: 'rewind', { previousTime, currentTime }: any): void
   (e: 'fastforward', { previousTime, currentTime }: any): void
   (e: 'reset', { currentTime }: any): void
+  (e: 'error', payload: any): void
   (e: any, payload: any): void
 }>()
 
+watch(
+  () => audioState.value.error,
+  (error) => {
+    if (props.id === audioState.value.audioItemId) {
+      if (error) {
+        emit('error', error)
+      }
+    }
+  }
+)
+
 watch(
   [() => audioState.value.playing, () => audioState.value.audioItemId],
   ([newPlaying, newAudioItemId]) => {

diff --git a/src/components/audio/AudioResource/AudioResource.stories.ts b/src/components/audio/AudioResource/AudioResource.stories.ts
@@ -155,6 +155,7 @@ export const Default: Story = {
     @playbackSpeed="logEvent('playbackSpeed', $event)"
     @favourite="logEvent('favourite', $event)"
     @timeupdate="logEvent('timeupdate', $event)"
+    @error="logEvent('error', $event)"
     ></MVAudioResource></MVAudioPlayer></div>`
   }),
   args: {
@@ -195,6 +196,7 @@ export const WithDescription: Story = {
         @playbackSpeed="logEvent('playbackSpeed', $event)"
         @favourite="logEvent('favourite', $event)"
         @timeupdate="logEvent('timeupdate', $event)"
+        @error="logEvent('error', $event)"
         >
 
         <template #audio-description>
@@ -254,6 +256,7 @@ export const WithMeditationMixer: Story = {
           @playbackSpeed="logEvent('playbackSpeed', $event)"
           @favourite="logEvent('favourite', $event)"
           @timeupdate="logEvent('timeupdate', $event)"
+          @error="logEvent('error', $event)"
           >
   
           <template #audio-description>
@@ -282,6 +285,7 @@ export const WithMeditationMixer: Story = {
                 @play="logEvent('play', $event)"
                 @pause="logEvent('pause', $event)"
                 @timeupdate="logEvent('timeupdate', $event)"
+                @error="logEvent('error', $event)"
                 />
               </MVCarouselSlide>
             </MVCarousel>
@@ -342,6 +346,7 @@ export const MultipleAudios: Story = {
           @favourite="logEvent('favourite', $event)"
           @timeupdate="logEvent('timeupdate', $event)"
           @reset="logEvent('reset', $event)"
+          @error="logEvent('error', $event)"
           >
   
           <template #audio-description>
@@ -370,6 +375,7 @@ export const MultipleAudios: Story = {
                 @play="logEvent('play', $event)"
                 @pause="logEvent('pause', $event)"
                 @timeupdate="logEvent('timeupdate', $event)"
+                @error="logEvent('error', $event)"
                 />
               </MVCarouselSlide>
             </MVCarousel>

diff --git a/src/components/audio/AudioResource/AudioResource.vue b/src/components/audio/AudioResource/AudioResource.vue
@@ -68,6 +68,7 @@ const emit = defineEmits<{
   (e: 'rewind', { previousTime, currentTime }: any): void
   (e: 'fastforward', { previousTime, currentTime }: any): void
   (e: 'reset', { currentTime }: any): void
+  (e: 'error', payload: any): void
   (e: any, payload: any): void
 }>()
 
@@ -109,6 +110,7 @@ const handleFavourite = () => {
       @playbackSpeed="emitEvent('playbackSpeed', $event)"
       @timeupdate="emitEvent('timeupdate', $event)"
       @reset="emitEvent('reset', $event)"
+      @error="emitEvent('error', $event)"
     >
       <div class="grid grid-cols-3 text-white relative gap-8">
         <!-- Image -->

diff --git a/src/components/audio/Meditation/MeditationTrackItem/MeditationTrackItem.vue b/src/components/audio/Meditation/MeditationTrackItem/MeditationTrackItem.vue
@@ -39,6 +39,7 @@ const emit = defineEmits<{
   (e: 'play', { currentTime }: any): void
   (e: 'pause', { currentTime }: any): void
   (e: 'ended', { currentTime }: any): void
+  (e: 'error', payload: any): void
   (e: any, payload: any): void
 }>()
 
@@ -132,6 +133,7 @@ const emitEvent = (eventName: string, payload?: any) => {
     @pause="emitEvent('pause', $event)"
     @timeupdate="emitEvent('timeupdate', $event)"
     @ended="emitEvent('ended', $event)"
+    @error="emitEvent('error', $event)"
   >
     <div
       data-testid="meditation-track-item"

diff --git a/src/composables/use-global.ts b/src/composables/use-global.ts
@@ -15,26 +15,24 @@ export function useGlobal() {
     return secMin
   }
 
-  const formatSources = (localSources: any = [], isAudio = true) => {
+  const formatSources = (sources: any = [], isAudio = true) => {
     const hlsId = isAudio ? 'mp4a' : 'hls'
     let audioSources = []
 
-    if (localSources && localSources.length) {
-      audioSources = localSources?.filter((source: any) => source.id === hlsId)
+    if (sources && sources.length) {
+      audioSources = sources?.filter((source: any) => source.id === hlsId)
     }
 
     if (!audioSources.length) {
-      audioSources = localSources?.filter(
-        (source: any) => source.id === 'mp3' || source.id === 'ogg'
-      )
+      audioSources = sources?.filter((source: any) => source.id === 'mp3' || source.id === 'ogg')
     }
 
     const updatedSources = []
 
     for (const i in audioSources) {
       updatedSources.push({
-        type: localSources[i]?.contentType,
-        src: localSources[i]?.url
+        type: sources[i]?.contentType,
+        src: sources[i]?.url
       })
     }