<file_sep>import React from 'react'
import { withTracker } from 'meteor/react-meteor-data'
import { Store } from '/ui/Store.js'

const Msg = (props) => {
    const { msg, type } = props.notification
    return <div className={type}>{msg}</div>
}

export const Notification = 
    withTracker(() => {
        return { notification: Store.notification.get() }
    })(Msg)
<file_sep>import React from 'react'
import { Notification } from '/ui/Notification.jsx'
import { LogIn } from '/ui/LogIn.jsx'
import { Admin } from '/ui/Admin.jsx'
import { Guest } from '/ui/Guest.jsx'

export const App = () => (
  <div>
    <Notification/>
    <h1>WebBlind - Audio Broadcasting with Meteor.js</h1>
    <LogIn/>
    <Admin/>
    <Guest/>
  </div>
)
<file_sep>import React, { useState } from 'react'
import styled from 'styled-components'
import { withTracker } from 'meteor/react-meteor-data'
import { AudioStreams } from '/collections/AudioStreams.js'

const GuestInner = (props) => {
    const { audioStream, userId } = props

    if (userId || !audioStream) return <></>
    return <Styles>
        <audio controls autoplay><source src={audioStream.file}/></audio>
    </Styles>

}

export const Guest = 
    withTracker(() => {
        Meteor.subscribe('AudioStreams.all')
        const audioStream = AudioStreams.findOne() // TODO timing related stuff
        console.log(audioStream)
        const userId = Meteor.userId()
        return ({ audioStream, userId })
    })(GuestInner)


const Styles = styled.div`

`<file_sep>import React, { useState } from 'react'
import styled from 'styled-components'
import { withTracker } from 'meteor/react-meteor-data'
import { loadingWrapper, warn } from '/ui/Helpers.js'
import { AudioStreams } from '/collections/AudioStreams.js'

const AdminInner = (props) => {
    const { audioStreams, isLoading, userId } = props

    const add = () => event => {
        event.preventDefault()
        if (!file || !startDate || !startTime) {
            return warn('Please provide a file a start date and start time')
        }
        AudioStreams.insert({
            startDate,
            startTime,
            file,
        })
    }
    const remove = audioStream => event => AudioStreams.remove(audioStream._id)
    const [file, setFile] = useState('')
    const [startDate, setStartDate] = useState('')
    const [startTime, setStartTime] = useState('')
    const setValue = setter => event => setter(event.target.value.trim())

    if (!userId) return <></>
    return (
        <Styles>
            {loadingWrapper(isLoading, (() => <>
                <form>
                    {/* <label>File: <input type="file" accept=".mp3" onChange={inputFile}/></label> */}
                    <label>File: <input type="text" onChange={setValue(setFile)}/></label>
                    <label>Start date: <input type="date" name="startDate" onChange={setValue(setStartDate)}/></label>
                    <label>Start time: <input type="time" name="startTime" onChange={setValue(setStartTime)}/></label>
                    <button onClick={add()}>Add</button>
                </form>
                <table>
                    <thead>
                    <tr>
                        <th>File</th>
                        <th>Start time</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    {audioStreams.map((audioStream, i) => 
                        <tr key={i}>
                            <td>{audioStream.file}</td>
                            <td>{audioStream.startTime}</td>
                            <td>
                                <button onClick={remove(audioStream)}>Remove</button>
                                <audio controls><source src={audioStream.file}/></audio>
                            </td>
                        </tr>
                    )}
                    </tbody>
                </table>
            </>))}
        </Styles>
    )
}

export const Admin = 
    withTracker(() => {
        const handle = Meteor.subscribe('AudioStreams.all')
        const userId = Meteor.userId()
        return ({ audioStreams: AudioStreams.find().fetch(), isLoading: !handle.ready(), userId })
    })(AdminInner)


const Styles = styled.div`
    form {
        display: flex;
        flex-direction: column;
        width: 30%;
        margin-bottom: 1rem;
    }

    table {
      border-spacing: 0;
      border: 1px solid grey;
      tr {
        :last-child {
          td {
            border-bottom: 0;
          }
        }
      }
      th,
      td {
        margin: 0;
        padding: 0.5rem;
        border-bottom: 1px solid grey;
        border-right: 1px solid grey;
        word-break: keep-all;
        :last-child {
          border-right: 0;
        }
      }
    }
`<file_sep>import { Meteor } from 'meteor/meteor'
import { AudioStreams } from '/collections/AudioStreams.js'

const USERS = [
    { username: 'Test', email: '<EMAIL>', password: '<PASSWORD>', verified: true },
]
const AUDIO_STREAMS = [
    { file: 'https://www.computerhope.com/jargon/m/example.mp3', startDate: '2020-01-14', startTime: '01:01' },
]

export const loadInitialData = () => {
    Meteor.users.remove({})
    AudioStreams.remove({})
    if (!Meteor.users.find().count()) {
        USERS.forEach(user => Accounts.createUser(user))
        AUDIO_STREAMS.forEach(stream => AudioStreams.insert(stream))
    }
}<file_sep>import { Meteor } from 'meteor/meteor';
import { loadInitialData } from '/server/initial-data';

Meteor.startup(() => {
    // DON'T CHANGE THE NEXT LINE
    loadInitialData();

    // YOU CAN DO WHATEVER YOU WANT HERE
});