import { randomMenuOptions } from './overlay'
import { wrapVideo } from './wrapper'

const video = document.querySelector('#video') as HTMLVideoElement

video.volume = 0

// const streamId = 'ms4euwiec7bkai'
// const streamId = 'ms8q4350442m15'
const streamId = 'msowt4fvexvz6x'

// const streamUrl = `http://live.museme.com:8080/hls/${streamId}/index.m3u8`
const streamUrl = `http://88.205.25.78:8080/hls/${streamId}/index.m3u8`

const Hls = require('hls.js')

const hlsPlayer = new Hls()
hlsPlayer.attachMedia(video)
hlsPlayer.loadSource(streamUrl)

// eslint-disable-next-line no-console
console.log('live')

const [museme] = wrapVideo(
  video,
  streamId,
  {
    getMetadataUrl() {
      // const socketUrl = `ws://88.205.25.75:8080/${streamId}.json?meta=3`
      const socketUrl = `ws://88.205.25.78:8080/${streamId}.json?meta=3`

      return socketUrl
    },
    async getObjectMenu() {
      const menu = randomMenuOptions()

      return menu
    },
  },
  true
)

museme.setSetting('showOverlay', true)