Is it possible to change the default behavior of the step-forward and backward buttons?

Podlove Web Player
1

Hello Community,

I wonder if it is possible to change the default values of the forward and backward buttons.

I would like to get for example a 15 secods forward behavior and also change the text in the button from 30 to 15 and the title from fast forward 30 seconds to something with 15 seconds like.

I am not able to select it somehow.

This is working, with an external button

let storeLiveHlsBackendPlaytime
let storeLiveHls
let playerLiveHls = document.getElementById("playerLiveHls")


function goFifteenSecondsForward(store) {
    store.dispatch(
        {
            type: 'PLAYER_REQUEST_PLAYTIME',
            payload:  storeLiveHlsBackendPlaytime + 15 * 1000
        }
    )
}
window
    .podlovePlayer(playerLiveHls , "fixtures/live/hls/episode.json", "fixtures/live/hls/config.json")
    .then(store => {
        storeLiveHls= store;
        storeLiveHls.subscribe(
            () => {
                if (storeLiveHls.getState().lastAction.type === "PLAYER_BACKEND_PLAYTIME") {
                    storeLiveHlsBackendPlaytime= storeLiveHls.getState().lastAction.payload
                }
            })
        let goForwardBtn = document.createElement("button")
        let text = document.createTextNode("15 Seconds Forward")
        goForwardBtn.appendChild(text)
        goForwardBtn.addEventListener("click", function () {
            goFifteenSecondsForward(storeLiveHls)
        })
        playerLiveHls .appendChild(goForwardBtn)
    })

But if I want to select the player button and console.log that I get the follow logs:

let btnForward = document.getElementById("stepper-button--forward")
// null
let btnForward = document.getElementsByTagName("button");
// all buttons that are not inside of the default player instance
let btnForward = document.getElementsByTagName("step-forward");
// HTMLCollection []
let btnForward = document.getElementsByClassName("stepper-button")
// HTMLCollection []
let btnForward = document.querySelectorAll('[data-test="step-forward"]');
// NodeList[]

How could I handle it?

Thanks and best regards.

2

I can change still the default behavior because now I am not selecting the HTML Button but just changing the action, still I need to select the element

Here is a implementation to change the default values backwards and forward button to 10 Seconds.

function changeDefaultForwardOrBackwards(store, playtime, milliseconds) {
    store.dispatch(
        {
            type: 'PLAYER_REQUEST_PLAYTIME',
            payload:  playtime + milliseconds
        }
    )
}

window
    .podlovePlayer(playerLiveHls, "fixtures/live/hls/episode.json", "fixtures/live/hls/config.json")
    .then(store => {
        storeLiveHls = store;
        storeLiveHls.subscribe(
            () => {
                if (storeLiveHls.getState().lastAction.type === "PLAYER_BACKEND_PLAYTIME") {
                    storeLiveHlsBackendPlaytime = storeLiveHls.getState().lastAction.payload
                }
                // change default behavior of forward button from 30 to 10 seconds
                if (storeLiveHls.getState().lastAction.type === "PLAYER_STEP_FORWARD") {
                    changeDefaultForwardOrBackwards(storeLiveHls, storeLiveHlsBackendPlaytime, -20 * 1000)
                }
                // change default behavior of backwards button from 15 to 10 seconds
                if (storeLiveHls.getState().lastAction.type === "PLAYER_STEP_BACKWARDS") {
                    changeDefaultForwardOrBackwards(storeLiveHls, storeLiveHlsBackendPlaytime, 5 * 1000)
                }
            })
    })

I hope that this kind of questions helps the community also =)

Best Regards