Story

In scripts, we can obtain the story instance through functions, allowing for fine-grained control over the story.

Basic Information

The story instance records all the basic information about the current story's development. Developers can directly modify this basic information for precise control.

Key	Name	Description	Controllable
story	Story	The current story
save	Save	The current story's save data
theme	Theme	The current story's theme	✅
scene	Scene	The current scene	✅
message	Message	Displays a pop-up message prompt by assignment	✅
media	Media	The currently loaded story media	✅
mediaDom	Media Dom	The currently playing media DOM element
paused	Paused	Whether playback is paused
volume	Volume	The volume of the current media
tip	Tip	Assigning media here displays a tip	✅
played	Played	Whether the story media has finished playing
duration	Duration	The duration of the current story media
currentTime	Current Time	The current playback progress
playbackRate	Playback Rate	The current playback speed
fullscreen	Fullscreen	Whether in fullscreen mode
fnPanel	Sub-Page	The current sub-page	✅

For example, displaying a prompt when a button is clicked:

export default {
    ...otherParameters(ignore),
    /**
     * Event Run
     *
     * @param {object} save  Save - The story save data
     * @param {object} story  Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
     * @param {object} loader Loader - The Vue node of the event loader
     * @return {Promise<Place|yinObject|undefined>}
     */
    run(save, story, loader) {
        story.message = 'Hello'

        /**
         * message
         * @typedef {object|string} message
         * @property {string} content - The message content (supports rich text) (does not support content rendering)
         * @property {string} enterAnimation - Animation class, e.g., `animate__fadeInRight`
         * @property {object} style - Message style
         * @property {number} duration - Display duration
         */
        story.message = {
            content: '<p>Hello</p>',
            enterAnimation: 'animate__fadeInRight',
            style: {
                // Move the pop-up to the top-left
                left: '21px'
            },
            duration: 2000
        }
    }
}

Functions

You can also control story behavior through some functions.

Event	Name	Description
play	Play
pause	Pause
speedCtrl	Toggle Playback Speed	Cycles through several speed options
speedUp	Fast Play	3x speed
speedUpEnd	Exit Fast Play
playToStart	Jump to Scene Start
playToEnd	Jump to Scene End	Jump to the time when the story finishes playing
fullscreenCtrl	Toggle Fullscreen
selectSave	Switch Save	Navigate to the save selection page
logout	Logout

For example, pausing playback and adjusting the playback progress when a button is clicked:

export default {
    ...otherParameters(ignore),
    /**
     * Event Run
     *
     * @param {object} save  Save - The story save data
     * @param {object} story  Story - The story object, which allows for prompts, pop-ups, and other operations to modify the story
     * @param {object} loader Loader - The Vue node of the event loader
     * @return {Promise<Place|yinObject|undefined>}
     */
    run(save, story, loader) {
        story.pause()
        // The unit of `currentTime` in the media DOM is seconds
        story.mediaDom.currentTime = 5

        story.message = 'Wrong choice!\nTime stops, the cycle begins~~'
    }
}