Migrating ui template from Dashboard-1 to Dashboard-2

Dashboard
7

Been experimenting and it works fine when playing mp4 as well as http but when I try to play a hls stream it does not start playing

Below is the specific code where I inserted a number of debug messages. It reaches the following:
show hls
hls is supported
z is set
binding worked

but it never reaches url loaded

Here I'm stucked, any hints would be great

The url is "/mp4frag/7424e65996a40660/hls.m3u8" and plays fine in the db-1 version both in Chrome and Safari

            if (msg.payload?.indexOf('cam') > -1 && msg.url?.indexOf('.m3u8') < 0 && msg.url?.indexOf('youtube') < 0) {
                if (this.hls_m) { this.hls_m.destroy() }
                this.show('str_')
            } else if (msg.url?.indexOf('.m3u8') > -1) {
                if (this.hls_m) { this.hls_m.destroy() }
                if (this.isSafari()) {
                    this.show('saf_')
                } else {
                    this.send({ payload: 'show hls' })
                    this.show('hls_')
                    this.hls_m = new window.Hls()
                    if (window.Hls?.isSupported()) {
                        this.send('hls is supported')
                        const z = this.$refs.hls_
                        this.send('z is set')
                        // bind them together
                        this.hls_m.attachMedia(z)
                        this.send('binding worked')
                        this.hls_m.on(window.Hls.Events.MEDIA_ATTACHED, function () {
                            this.hls_m.loadSource(msg.url)
                            this.send('url loaded')
                            this.hls_m.on(window.Hls.Events.MANIFEST_PARSED, function () {
                                this.send('hls now playing')
                                z.play()
                            })
                        })
                    }
                }