plotly / dash-player

Dash Component wrapping React-Player
MIT License
77 stars 12 forks source link

Callback Bug #45

Closed danielenricocahall closed 1 year ago

danielenricocahall commented 1 year ago

In the demo code, if the "seek-to" button is dropped, the other states don't update. Reproducible example:

from dash import Dash, html, Input, Output, State
import dash_player

app = Dash(__name__)

app.scripts.config.serve_locally = True

app.layout = html.Div(
    [
        dash_player.DashPlayer(
            id="video-player",
            url="http://media.w3.org/2010/05/bunny/movie.ogv",
            controls=True,
        ),
        # html.Button("Set seekTo to 10", id="button-seek-to"), 
        html.Div(id="div-current-time", style={"margin-bottom": "20px"}),
        html.Div(id="div-method-output"),
    ]
)

@app.callback(
    Output("div-current-time", "children"), Input("video-player", "currentTime")
)
def update_time(currentTime):
    return "Current Time: {}".format(currentTime)

@app.callback(
    Output("div-method-output", "children"),
    Input("video-player", "secondsLoaded"),
    State("video-player", "duration"),
)
def update_methods(secondsLoaded, duration):
    return "Second Loaded: {}, Duration: {}".format(secondsLoaded, duration)

if __name__ == "__main__":
    app.run_server(debug=True)

I assumed it could be an issue with the property being defined, so I tried supplying the seekTo property in the constructor of the component e.g;

        dash_player.DashPlayer(
            id="video-player",
            url="http://media.w3.org/2010/05/bunny/movie.ogv",
            controls=True,
            seekTo=10
        )

It may need to be assigned in the constructor too.