<template>
    <div>
        <slot :streamer="streamer" :streamers="streamers" :Sound="Sound"
            :sources="sources" :fetchStreamers="fetchStreamers"></slot>
    </div>
</template>
<script>
import Sound from '../sound';
import {setEcoInterval} from '../utils';

import Streamer from '../streamer';


export default {
    props: {
        apiUrl: String,
    },

    data() {
        return {
            // current streamer
            streamer: null,
            // all streamers
            streamers: [],
            // fetch interval id
            fetchInterval: null,
            Sound: Sound,
        }
    },

    computed: {
        sources() {
            var sources = this.streamer ? this.streamer.sources : [];
            return sources.filter(s => s.data)
        },
    },

    methods: {
        fetchStreamers() {
            Streamer.fetch(this.apiUrl, {many:true}).then(streamers => {
                this.streamers = streamers
                this.streamer = streamers ? streamers[0] : null
            })
        },
    },

    mounted() {
        this.fetchStreamers();
        this.fetchInterval = setEcoInterval(() => this.streamer && this.streamer.fetch(), 5000)
    },

    unmounted() {
        if(this.fetchInterval !== null)
            clearInterval(this.fetchInterval)
    }
}
</script>
