From 0158af226d2d24bc5ab4c1e2f291d3a4686cf111 Mon Sep 17 00:00:00 2001 From: Olga Bulat Date: Tue, 9 Aug 2022 17:28:15 +0300 Subject: [PATCH] Add changes from other PRs #1628, #1626 --- src/stores/active-media.ts | 99 ++++++++----------- .../specs/stores/active-media-store.spec.js | 17 +++- 2 files changed, 54 insertions(+), 62 deletions(-) diff --git a/src/stores/active-media.ts b/src/stores/active-media.ts index b2bb0e73ac..5cf89af928 100644 --- 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 index 03a3a3ee01..ab5a9ee0dd 100644 --- a/test/unit/specs/stores/active-media-store.spec.js +++ b/test/unit/specs/stores/active-media-store.spec.js @@ -14,17 +14,22 @@ 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) => { @@ -32,7 +37,7 @@ describe('Active Media Store', () => { 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()