search

elm / virtual-dom

The foundation of HTML and SVG in Elm.
https://package.elm-lang.org/packages/elm/virtual-dom/latest
BSD 3-Clause "New" or "Revised" License
209 stars 80 forks source link

video tracks are duplicated after re-rendering #116

Closed rnons closed 7 years ago

rnons commented 7 years ago

A reproducible repo: https://github.com/rnons/elm-video-track-issue

image

There is a video tag and two buttons. The issue is when I click button to change subtitle languages, old track is still there.

process-bot commented 7 years ago

Thanks for the issue! Make sure it satisfies this checklist. My human colleagues will appreciate it!

Here is what to expect next, and if anyone wants to comment, keep these things in mind.

zwilias commented 7 years ago

@rnons it seems that if you update the src of a track element (which is what Elm does here, as it is the minimal change required), the browser interprets that as adding a subtitle track.

The easiest fix here, is to force Elm to remove the old track element (which removes the subtitle track entirely) and adding a fresh track element. In order to do so, you'll want to use Html.Keyed like so:

import Html.Keyed

view model =
    div []
        [ Keyed.node "video"
            [ controls True ]
            [ ( "video", source [ src "https://download.ted.com/talks/RandallMunroe_2014-320k.mp4" ] [] )
            , ( model.selected, track [ src model.selected, default True ] [] )
            ]
        , div []
            [ button [ onClick (SelectLang "en.vtt") ] [ text "en" ]
            , button [ onClick (SelectLang "zh-cn.vtt") ] [ text "zh-cn" ]
            ]
        ]
rnons commented 7 years ago

@zwilias works great, I didn't know about Html.Keyed before. Thank you very much.