spee.ch/views/index.handlebars

{{> topBar}}
<div class="row row--full-height">
    <div id="primary-dropzone-wrapper">
        <div id="primary-dropzone" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onclick="triggerFileChooser('siofu_input', event)">
            <div id="primary-dropzone-instructions">
                <div class="row">
                    <p>Drag & drop image or video here</p>
                    <p>OR</p>
                    <form>
                        <label class="input-file-label" for="siofu_input">CHOOSE FILE</label>
                        <input class="input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
                    </form>
                </div>
                <div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
            </div>
        </div>
    </div>
    <div id="publish-form-wrapper" hidden="true">
        <div class="column column--10">
            <!-- title input -->
            <input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Title (optional)">
        </div>
        <div class="column column--5 column--med-10 align-content-top" >
            <!-- preview -->
            <div class="row">
                <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()" onclick="triggerFileChooser('siofu_input', event)">
                    <div id="asset-preview-target"></div>
                    <div id="preview-dropzone-instructions" hidden="true">
                        <div class="row">
                            <p>Drag & drop image or video here</p>
                            <p>OR</p>
                            <form>
                                <label class="input-file-label" for="siofu_input">CHOOSE FILE</label>

                            </form>
                        </div>
                    </div>

                </div>
            </div>
            <!-- description input -->
            <textarea rows="2" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea>
        </div><div class="column column--5 column--med-10 align-content-top">
            <div id="publish-status" class="row" hidden="true"></div>
            <div id="publish-progress-bar" class="row" hidden="true"></div>
            <div id="publish-active-area">
                {{> publishForm-Channel}}
                {{> publishForm-Url}}
                {{> publishForm-Thumbnail}}
                {{> publishForm-Details}}
                {{> publishForm-Submit}}
            </div>
        </div>
    </div>
</div>


<script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.js"></script>
<script typ="text/javascript">

    checkCookie();

    var socket = io();
    var uploader = new SocketIOFileUpload(socket);
    var stagedFiles = null;

    /* drop zone functions */
    function showInstructions () {
        document.getElementById('preview-dropzone-instructions').hidden = false;
        document.getElementById('asset-preview').style.opacity = 0.3;
    }
    function hideInstructions () {
        document.getElementById('preview-dropzone-instructions').hidden = true;
        document.getElementById('asset-preview').style.opacity = 1;
    }
    function drop_handler(event) {
        event.preventDefault();
        // if dropped items aren't files, reject them
        var dt = event.dataTransfer;
        if (dt.items) {
            if (dt.items[0].kind == 'file') {
                var droppedFile = dt.items[0].getAsFile();
                previewAndStageFile(droppedFile);
            }
        }
    }
    function dragover_handler(event) {
        event.preventDefault();
    }
    function dragend_handler(event) {
        var dt = event.dataTransfer;
        if (dt.items) {
            for (var i = 0; i < dt.items.length; i++) {
                dt.items.remove(i);
            }
        } else {
            event.dataTransfer.clearData();
        }
    }
    function triggerFileChooser(fileInputId, event) {
        document.getElementById(fileInputId).click();
    }

	/* socketio-file-upload listeners */
    function updatePublishStatus(msg){
        document.getElementById('publish-status').innerHTML = msg;
    }
	uploader.addEventListener('start', function(event){
	    console.log('starting upload');
        const name = document.getElementById('claim-name-input').value;
        const title = document.getElementById('publish-title').value;
        const description = document.getElementById('publish-description').value;
        const license = document.getElementById('publish-license').value;
        const nsfw = document.getElementById('publish-nsfw').checked;
        const anonymous = document.getElementById('anonymous-select').checked;
        console.log('anonymous?', anonymous);
        const channel = document.getElementById('channel-name-select').value;
        console.log('channel:', channel);
        const thumbnail = document.getElementById('claim-thumbnail-input').value;
		event.file.meta.name = name;
		event.file.meta.title = title;
		event.file.meta.description = description;
		event.file.meta.license = license;
		event.file.meta.nsfw = nsfw;
		event.file.meta.type = stagedFiles[0].type;
		if (!anonymous) {
		    event.file.meta.channel = channel;
        }
        if (thumbnail && (thumbnail.trim !== '')){
            event.file.meta.thumbnail = thumbnail;
        }
        // hide the submit area
        document.getElementById('publish-active-area').hidden = true;
		// show the progress status and animation
		document.getElementById('publish-status').hidden = false;
        document.getElementById('publish-progress-bar').hidden = false;
		createProgressBar(document.getElementById('publish-progress-bar'), 12);
		// google analytics
		ga('send', {
			hitType: 'event',
			eventCategory: 'publish',
			eventAction: name
		});
	});
	uploader.addEventListener('progress', function(event){
		var percent = event.bytesLoaded / event.file.size * 100;
		updatePublishStatus('File is ' + percent.toFixed(2) + '% loaded to the server');
	});
	/* socket.io message listeners */
	socket.on('publish-status', function(msg){
		updatePublishStatus(msg);
	});
	socket.on('publish-failure', function(msg){
		updatePublishStatus('<p> --(✖╭╮✖)→ </p><p>' + JSON.stringify(msg) + '</p><strong>For help, post the above error text in the #speech channel on the <a href="https://lbry.slack.com/" target="_blank">lbry slack</a></strong>');
		document.getElementById('publish-progress-bar').hidden = true;
	});
	socket.on('publish-complete', function(msg){
	    console.log(msg);
		var showUrl = msg.result.claim_id + "/" + msg.name;
		// update status
		updatePublishStatus('<p>Your publish is complete! You are being redirected to it now.</p><p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>');
        document.getElementById('publish-progress-bar').hidden = true;
        // redirect the user
		window.location.href = showUrl;
	});
</script>