Hi all! How do I modify such a thing to kotlin: ``...

# react

[Joost Klitsie]

Hi all! How do I modify such a thing to kotlin:

<ReactPlayer
              config={{
                file: {
                  hlsOptions: {
                    forceHLS: true,
                    debug: false,
                    xhrSetup: function(xhr, url) {
                      if (needsAuth(url)) {
                        xhr.setRequestHeader('Authorization', getToken())
                      }
                    },
                  },
                },
              }}
            />

I saw the things on https://play.kotlinlang.org/hands-on/Building%20Web%20Applications%20with%20React%20and%20Kotlin%20JS/07_Using_Packages_From_NPM but I can't wrap my head around it

[Joost Klitsie]

I am going in this direction, does it make sense?

@file:JsModule("react-player")
@file:JsNonModule

import org.w3c.xhr.XMLHttpRequest
import react.*

@JsName("default")
external val reactPlayer: RClass<ReactPlayerProps>

external interface ReactPlayerProps : RProps {
    var url: String
    var controls: Boolean
    var config: ReactPlayerConfig
}

@JsName("config")
external interface ReactPlayerConfig: RProps {
    var file: FileConfig
}

@JsName("file")
external class FileConfig {
    var hlsOptions: HlsOptions
}

@JsName("hlsOptions")
external class HlsOptions {
    var forceHLS: Boolean
    var debug: Boolean
    var xhrSetup: (XMLHttpRequest, String) -> Unit
}

[andylamax]

this is correct, does it not work?

[Joost Klitsie]

I don't see the header being changed

[Joost Klitsie]

If I look here:
https://github.com/cookpete/react-player/blob/master/index.d.ts

[Joost Klitsie]

and then use the hls config defined here:
https://github.com/video-dev/hls.js/blob/master/src/config.ts

[Joost Klitsie]

I have this code:

@file:JsModule("react-player")
@file:JsNonModule

package com.klitsie.pubquiz.app.component.edit

import react.*

@JsName("default")
external val reactPlayer: RClass<ReactPlayerProps>

external interface ReactPlayerProps : RProps {
    var url: String
    var controls: Boolean
    var config: Config?
}

@JsName("Config")
external interface Config {
    var file: FileConfig?
}

@JsName("FileConfig")
external interface FileConfig {
    var forceHLS: Boolean
    var hlsOptions: HlsConfig
}

[Joost Klitsie]

@file:JsModule("hls.js")
@file:JsNonModule

package com.klitsie.pubquiz.app.component.edit

import org.w3c.xhr.XMLHttpRequest

@JsName("HlsConfig")
external interface HlsConfig {
    var debug: Boolean
    var xhrSetup: (xhr: XMLHttpRequest, url: String) -> Unit
}

[Joost Klitsie]

val token = tokenMemoryStorage.value.value ?: "NO_TOKEN"
                    reactPlayer {
                        attrs.url = "<https://127.0.0.1:8442/content/video/adnovum_video.mp4>"
                        val hlsOptions = object: HlsConfig {
                            override var debug: Boolean = true
                            override var xhrSetup = { xhr: XMLHttpRequest, _: String ->
                                xhr.setRequestHeader("Authorization", "bearer $token")
                            }
                        }

                        attrs.config =
                            object : Config {
                                override var file: FileConfig? = object: FileConfig {
                                    override var forceHLS: Boolean = true
                                    override var hlsOptions: HlsConfig = hlsOptions
                                }
                        }
                    }

[Joost Klitsie]

implementation(npm("react-player", "2.6.2"))
                implementation(npm("hls.js", "0.14.16"))

[Joost Klitsie]

It just doesn't do anything 😞

[Joost Klitsie]

like the player is there

[Joost Klitsie]

it works

[Joost Klitsie]

but there is no header added to the request