<div class="camera">
    <div class="camera-container" ref="frameContainer">
        <div class="no-frame" v-if="!streaming && !capturing">The camera is not active</div>
        <img class="frame" :src="url" ref="frame">
    </div>

    <div class="controls">
        <button type="button" @click="startStreaming" :disabled="capturing" v-if="!streaming">
            <i class="fa fa-play"></i>&nbsp; Start streaming
        </button>

        <button type="button" @click="stopStreaming" :disabled="capturing" v-else>
            <i class="fa fa-stop"></i>&nbsp; Stop streaming
        </button>

        <button type="button" @click="capture" :disabled="streaming || capturing">
            <i class="fas fa-camera"></i>&nbsp; Take snapshot
        </button>
    </div>

    <div class="url" v-if="url && url.length">
        <label class="row">
            <span class="name">Stream URL</span>
            <input name="url" type="text" :value="window.location.protocol + '//' + window.location.host + url"
                   disabled="disabled"/>
        </label>
    </div>

    <div class="params">
        <div class="head">
            <label class="row">
                <span class="name">Show parameters</span>
                <input name="toggleParams" type="checkbox" v-model="showParams"/>
            </label>
        </div>

        <div class="body" :class="{ hidden: !showParams }">
            <label class="row">
                <span class="name">Device</span>
                <input name="device" type="text" v-model="attrs.device" @change="onDeviceChanged"/>
            </label>

            <label class="row">
                <span class="name">Width</span>
                <input name="width" type="text" v-model="attrs.resolution[0]" @change="onSizeChanged"/>
            </label>

            <label class="row">
                <span class="name">Height</span>
                <input name="height" type="text" v-model="attrs.resolution[1]" @change="onSizeChanged"/>
            </label>

            <label class="row">
                <span class="name">Horizontal Flip</span>
                <input name="horizontal_flip" type="checkbox" v-model="attrs.horizontal_flip" @change="onFlipChanged"/>
            </label>

            <label class="row">
                <span class="name">Vertical Flip</span>
                <input name="vertical_flip" type="checkbox" v-model="attrs.vertical_flip" @change="onFlipChanged"/>
            </label>

            <label class="row">
                <span class="name">Rotate</span>
                <input name="rotate" type="text" v-model="attrs.rotate" @change="onSizeChanged"/>
            </label>

            <label class="row">
                <span class="name">Scale-X</span>
                <input name="scale_x" type="text" v-model="attrs.scale_x" @change="onSizeChanged"/>
            </label>

            <label class="row">
                <span class="name">Scale-Y</span>
                <input name="scale_y" type="text" v-model="attrs.scale_y" @change="onSizeChanged"/>
            </label>

            <label class="row">
                <span class="name">Frames per second</span>
                <input name="fps" type="text" v-model="attrs.fps" @change="onFpsChanged"/>
            </label>

            <label class="row">
                <span class="name">Grayscale</span>
                <input name="grayscale" type="checkbox" v-model="attrs.grayscale" @change="onGrayscaleChanged"/>
            </label>
        </div>
    </div>
</div>

