Add changes from other PRs

#1628, #1626
WordPress · Aug 11, 2022 · 0158af2 · 0158af2
1 parent ee5e7eb
commit 0158af2
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 62 deletions.
diff --git a/src/stores/active-media.ts b/src/stores/active-media.ts
@@ -1,10 +1,9 @@
 import { defineStore } from 'pinia'
-import { reactive, readonly, toRefs } from '@nuxtjs/composition-api'
 
 import type { SupportedMediaType } from '~/constants/media'
 import type { Media } from '~/models/media'
 
-type MediaStatus = 'ejected' | 'playing' | 'paused' // 'ejected' means player is closed
+export type MediaStatus = 'ejected' | 'playing' | 'paused' // 'ejected' means player is closed
 
 export interface ActiveMediaState {
   type: SupportedMediaType | null
@@ -18,69 +17,55 @@ const ACTIVE_MEDIA = 'active-media'
 /**
  * Store information about the active media item.
  */
-export const useActiveMediaStore = defineStore(ACTIVE_MEDIA, () => {
+export const useActiveMediaStore = defineStore(ACTIVE_MEDIA, {
   /* State */
 
-  const state: ActiveMediaState = reactive({
+  state: (): ActiveMediaState => ({
     type: null,
     id: null,
     status: 'ejected',
     message: null,
-  })
+  }),
   /**
    * Only the properties used by components are exported as refs.
    * `status` is not used anywhere in the components.
    */
-  const { type, id, message } = toRefs(state)
-
-  /* Actions */
-
-  /**
-   * Sets a new media item as the active one.
-   *
-   * @param type - the type of the active media
-   * @param id - the unique identifier of the active media
-   * @param status - the current status of the active media
-   */
-  function setActiveMediaItem({
-    type,
-    id,
-    status = 'playing',
-  }: {
-    type: SupportedMediaType
-    id: Media['id']
-    status?: MediaStatus
-  }) {
-    state.type = type
-    state.id = id
-    state.status = status
-  }
-  function pauseActiveMediaItem() {
-    state.status = 'paused'
-  }
-  function ejectActiveMediaItem() {
-    state.status = 'ejected'
-    state.id = null
-    state.type = null
-  }
-  /**
-   * Set the message associated with rendering/playback of the active media.
-   *
-   * @param message - the message to display to the user
-   */
-  function setMessage({ message }: { message: string }) {
-    state.message = message
-  }
-
-  return {
-    type: readonly(type),
-    id: readonly(id),
-    message: readonly(message),
-    state: readonly(state),
-
-    setActiveMediaItem,
-    pauseActiveMediaItem,
-    ejectActiveMediaItem,
-    setMessage,
-  }
+  actions: {
+    /**
+     * Sets a new media item as the active one.
+     *
+     * @param type - the type of the active media
+     * @param id - the unique identifier of the active media
+     * @param status - the current status of the active media
+     */
+    setActiveMediaItem({
+      type,
+      id,
+      status = 'playing',
+    }: {
+      type: SupportedMediaType
+      id: Media['id']
+      status?: MediaStatus
+    }) {
+      this.type = type
+      this.id = id
+      this.status = status
+    },
+    pauseActiveMediaItem() {
+      this.status = 'paused'
+    },
+    ejectActiveMediaItem() {
+      this.status = 'ejected'
+      this.id = null
+      this.type = null
+    },
+    /**
+     * Set the message associated with rendering/playback of the active media.
+     *
+     * @param message - the message to display to the user
+     */
+    setMessage({ message }: { message: string }) {
+      this.message = message
+    },
+  },
 })
diff --git a/test/unit/specs/stores/active-media-store.spec.js b/test/unit/specs/stores/active-media-store.spec.js
@@ -14,25 +14,30 @@ describe('Active Media Store', () => {
   describe('state', () => {
     it('sets initial filters to filterData', () => {
       const activeMediaStore = useActiveMediaStore()
-      expect(activeMediaStore.state).toEqual(initialState)
+      expect(activeMediaStore.type).toEqual(initialState.type)
+      expect(activeMediaStore.id).toEqual(initialState.id)
+      expect(activeMediaStore.status).toEqual(initialState.status)
+      expect(activeMediaStore.message).toEqual(initialState.message)
     })
   })
   describe('actions', () => {
-    it.each(statuses)('can set active media with status $status', (status) => {
+    it.each(statuses)(`can set active media with status $status`, (status) => {
       const activeMediaStore = useActiveMediaStore()
       const mediaItem = { type: AUDIO, id: 'audio1' }
       activeMediaStore.setActiveMediaItem({ ...mediaItem, status })
       const expectedState = { ...initialState, ...mediaItem, status }
 
-      expect(activeMediaStore.state).toEqual(expectedState)
+      expect(activeMediaStore.id).toEqual(expectedState.id)
+      expect(activeMediaStore.type).toEqual(expectedState.type)
+      expect(activeMediaStore.status).toEqual(expectedState.status)
     })
 
     it.each(statuses)('can pause an item with any status', (status) => {
       const activeMediaStore = useActiveMediaStore()
       activeMediaStore.setActiveMediaItem({ status })
       activeMediaStore.pauseActiveMediaItem()
 
-      expect(activeMediaStore.state.status).toEqual('paused')
+      expect(activeMediaStore.status).toEqual('paused')
     })
     it('can eject an item', () => {
       const activeMediaStore = useActiveMediaStore()
@@ -44,7 +49,9 @@ describe('Active Media Store', () => {
       })
       activeMediaStore.ejectActiveMediaItem()
 
-      expect(activeMediaStore.state).toEqual(initialState)
+      expect(activeMediaStore.id).toEqual(initialState.id)
+      expect(activeMediaStore.type).toEqual(initialState.type)
+      expect(activeMediaStore.status).toEqual(initialState.status)
     })
     it('can set a message', () => {
       const activeMediaStore = useActiveMediaStore()