Redesign 1 bcrypt #226
9 changed files with 292 additions and 285 deletions
|
|
@ -13,17 +13,9 @@
|
|||
}
|
||||
|
||||
/* publish */
|
||||
#drop-zone {
|
||||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
height: 13em;
|
||||
background: #F5F0EF;
|
||||
}
|
||||
|
||||
#asset-preview-holder {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* show routes */
|
||||
.show-asset {
|
||||
|
|
|
|||
|
|
@ -36,10 +36,6 @@ h1 {
|
|||
|
||||
h2 {
|
||||
font-size: x-large;
|
||||
margin-top: 1em;
|
||||
border-top: 1px #999 solid;
|
||||
background-color: lightgray;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
|
|
@ -173,6 +169,14 @@ input:-webkit-autofill {
|
|||
border: 1px solid grey;
|
||||
}
|
||||
|
||||
.input-disabled {
|
||||
border: 1px solid black;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0.3em 0.5em 0.3em;
|
||||
color: black;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
/* BUTTONS */
|
||||
|
||||
button {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,25 @@
|
|||
/* Publish Form */
|
||||
|
||||
/* blocks */
|
||||
.publish {
|
||||
|
||||
}
|
||||
|
||||
/* elements */
|
||||
.publish-dropzone {
|
||||
border: 1px dashed lightgrey;
|
||||
padding: 1em;
|
||||
height: 13em;
|
||||
background: #F5F0EF;
|
||||
}
|
||||
|
||||
.asset-preview {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Show page */
|
||||
|
||||
.asset-display {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.copy-input {
|
||||
|
||||
}
|
||||
|
|
@ -1,94 +0,0 @@
|
|||
/* drop zone functions */
|
||||
|
||||
function drop_handler(ev) {
|
||||
ev.preventDefault();
|
||||
// if dropped items aren't files, reject them
|
||||
var dt = ev.dataTransfer;
|
||||
if (dt.items) {
|
||||
if (dt.items[0].kind == 'file') {
|
||||
var droppedFile = dt.items[0].getAsFile();
|
||||
previewAndStageFile(droppedFile);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function dragover_handler(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
|
||||
function dragend_handler(ev) {
|
||||
var dt = ev.dataTransfer;
|
||||
if (dt.items) {
|
||||
for (var i = 0; i < dt.items.length; i++) {
|
||||
dt.items.remove(i);
|
||||
}
|
||||
} else {
|
||||
ev.dataTransfer.clearData();
|
||||
}
|
||||
}
|
||||
|
||||
/* publish functions */
|
||||
|
||||
// update the publish status
|
||||
function updatePublishStatus(msg){
|
||||
document.getElementById('publish-status').innerHTML = msg;
|
||||
}
|
||||
|
||||
// When a file is selected for publish, validate that file and
|
||||
// stage it so it will be ready when the publish button is clicked.
|
||||
function previewAndStageFile(selectedFile){
|
||||
var previewHolder = document.getElementById('asset-preview-holder');
|
||||
var dropzone = document.getElementById('drop-zone');
|
||||
var previewReader = new FileReader();
|
||||
var nameInput = document.getElementById('claim-name-input');
|
||||
// validate the file's name, type, and size
|
||||
try {
|
||||
validateFile(selectedFile);
|
||||
} catch (error) {
|
||||
showError('input-error-file-selection', error.message);
|
||||
return;
|
||||
}
|
||||
// set the image preview, if an image was provided
|
||||
if (selectedFile.type !== 'video/mp4') {
|
||||
previewReader.readAsDataURL(selectedFile);
|
||||
previewReader.onloadend = function () {
|
||||
dropzone.style.display = 'none';
|
||||
previewHolder.style.display = 'block';
|
||||
previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
|
||||
};
|
||||
}
|
||||
// set the name input value to the image name if none is set yet
|
||||
if (nameInput.value === "") {
|
||||
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
|
||||
nameInput.value = cleanseClaimName(filename);
|
||||
checkClaimName(nameInput.value);
|
||||
}
|
||||
// store the selected file for upload
|
||||
stagedFiles = [selectedFile];
|
||||
}
|
||||
|
||||
// Validate the publish submission and then trigger publishing.
|
||||
function publishSelectedImage(event) {
|
||||
var claimName = document.getElementById('claim-name-input').value;
|
||||
var channelName = document.getElementById('channel-name-select').value;
|
||||
// prevent default so this script can handle submission
|
||||
event.preventDefault();
|
||||
// validate, submit, and handle response
|
||||
validateFilePublishSubmission(stagedFiles, claimName, channelName)
|
||||
.then(() => {
|
||||
uploader.submitFiles(stagedFiles);
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.name === 'FileError') {
|
||||
showError(document.getElementById('input-error-file-selection'), error.message);
|
||||
} else if (error.name === 'NameError') {
|
||||
showError(document.getElementById('input-error-claim-name'), error.message);
|
||||
} else if (error.name === 'ChannelNameError'){
|
||||
console.log(error);
|
||||
showError(document.getElementById('input-error-channel-select'), error.message);
|
||||
} else {
|
||||
showError(document.getElementById('input-error-publish-submit'), error.message);
|
||||
}
|
||||
return;
|
||||
})
|
||||
};
|
||||
|
|
@ -1,24 +1,25 @@
|
|||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
|
||||
{{> topBar}}
|
||||
<div class="row" id="file-selection-area">
|
||||
<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<div class="row">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<div class="row" id="drop-zone-wrapper">
|
||||
<div class="publish-dropzone align-content-center" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="column column--5" id="asset-preview-holder"></div>
|
||||
<div class="column column--5" id="publish-active-area">
|
||||
{{> publishForm-Channel}}
|
||||
{{> publishForm-Url}}
|
||||
{{> publishForm-Details}}
|
||||
{{> publishForm-Submit}}
|
||||
<div class="row" id="publish-form-wrapper" hidden="true">
|
||||
<div class="column column--4 align-content-top" >
|
||||
<div id="asset-preview-holder" class="asset-show"></div>
|
||||
</div><div class="column column--1" ></div><div class="column column--5 align-content-top">
|
||||
<div id="publish-status" hidden="true"></div>
|
||||
<div id="publish-progress-bar" hidden="true"></div>
|
||||
<div id="publish-active-area">
|
||||
{{> publishForm-Channel}}
|
||||
{{> publishForm-Url}}
|
||||
{{> publishForm-Details}}
|
||||
{{> publishForm-Submit}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -26,35 +27,39 @@
|
|||
<script src="/siofu/client.js"></script>
|
||||
<script src="/assets/js/validationFunctions.js"></script>
|
||||
<script src="/assets/js/publishFileFunctions.js"></script>
|
||||
<script type="text/javascript" >
|
||||
function resetPublishArea (){
|
||||
// reset file selection area
|
||||
document.getElementById('file-selection-area').innerHTML = `<div id="drop-zone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)">
|
||||
<p>Drag and drop your file here, or choose your file below.</p>
|
||||
<div class="info-message info-message--failure" id="input-error-file-selection" hidden="true"></div>
|
||||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<div id="asset-preview-holder"></div>`;
|
||||
// reset inputs
|
||||
document.getElementById('claim-name-input').value = '';
|
||||
document.getElementById('publish-title').value = '';
|
||||
document.getElementById('publish-description').value = '';
|
||||
document.getElementById('publish-nsfw').checked = false;
|
||||
// remove staged files
|
||||
stagedFiles = null;
|
||||
// clear any errors
|
||||
document.getElementById('input-error-file-selection').innerHTML = '';
|
||||
document.getElementById('input-error-claim-name').innerHTML = '';
|
||||
document.getElementById('input-error-publish-submit').innerHTML = '';
|
||||
document.getElementById('input-success-claim-name').hidden = true;
|
||||
}
|
||||
</script>
|
||||
<script typ="text/javascript">
|
||||
// define variables
|
||||
var socket = io();
|
||||
var uploader = new SocketIOFileUpload(socket);
|
||||
var stagedFiles = null;
|
||||
var socket = io();
|
||||
var uploader = new SocketIOFileUpload(socket);
|
||||
var stagedFiles = null;
|
||||
/* drop zone functions */
|
||||
function drop_handler(ev) {
|
||||
ev.preventDefault();
|
||||
// if dropped items aren't files, reject them
|
||||
var dt = ev.dataTransfer;
|
||||
if (dt.items) {
|
||||
if (dt.items[0].kind == 'file') {
|
||||
var droppedFile = dt.items[0].getAsFile();
|
||||
previewAndStageFile(droppedFile);
|
||||
}
|
||||
}
|
||||
}
|
||||
function dragover_handler(ev) {
|
||||
ev.preventDefault();
|
||||
}
|
||||
function dragend_handler(ev) {
|
||||
var dt = ev.dataTransfer;
|
||||
if (dt.items) {
|
||||
for (var i = 0; i < dt.items.length; i++) {
|
||||
dt.items.remove(i);
|
||||
}
|
||||
} else {
|
||||
ev.dataTransfer.clearData();
|
||||
}
|
||||
}
|
||||
/* socketio-file-upload listeners */
|
||||
function updatePublishStatus(msg){
|
||||
document.getElementById('publish-status').innerHTML = msg;
|
||||
}
|
||||
uploader.addEventListener('start', function(event){
|
||||
var name = document.getElementById('claim-name-input').value;
|
||||
var title = document.getElementById('publish-title').value;
|
||||
|
|
@ -69,10 +74,12 @@
|
|||
event.file.meta.nsfw = nsfw;
|
||||
event.file.meta.type = stagedFiles[0].type;
|
||||
event.file.meta.channel = channel;
|
||||
// re-set the html in the publish area
|
||||
document.getElementById('publish-active-area').innerHTML = '<div id="publish-status"></div><div id="progress-bar"></div>';
|
||||
// start a progress animation
|
||||
createProgressBar(document.getElementById('progress-bar'), 12);
|
||||
// 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',
|
||||
|
|
@ -89,16 +96,15 @@
|
|||
updatePublishStatus(msg);
|
||||
});
|
||||
socket.on('publish-failure', function(msg){
|
||||
document.getElementById('publish-active-area').innerHTML = '<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>';
|
||||
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){
|
||||
var publishResults;
|
||||
var showUrl = msg.result.claim_id + "/" + msg.name;
|
||||
// build new publish area
|
||||
publishResults = '<p>Your publish is complete! You are being redirected to it now.</p>';
|
||||
publishResults += '<p><a target="_blank" href="' + showUrl + '">If you do not get redirected, click here.</a></p>';
|
||||
// update publish area
|
||||
document.getElementById('publish-active-area').innerHTML = publishResults;
|
||||
// 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>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
<div class="row">
|
||||
<div id="asset-placeholder">
|
||||
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
{{#ifConditional fileInfo.fileExt '===' 'gifv'}}
|
||||
<video class="show-asset" autoplay loop muted>
|
||||
<source src="/media/{{fileInfo.fileName}}">
|
||||
{{!--fallback--}}
|
||||
Your browser does not support the <code>video</code> element.
|
||||
</video>
|
||||
{{else}}
|
||||
<video class="show-asset" autoplay controls>
|
||||
<source src="/media/{{fileInfo.fileName}}">
|
||||
{{!--fallback--}}
|
||||
Your browser does not support the <code>video</code> element.
|
||||
</video>
|
||||
{{/ifConditional}}
|
||||
{{else}}
|
||||
<img class="show-asset" src="/media/{{fileInfo.fileName}}" />
|
||||
{{/ifConditional}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
{{#ifConditional fileInfo.fileExt '===' 'gifv'}}
|
||||
<video class="asset-display" autoplay loop muted>
|
||||
<source src="/media/{{fileInfo.fileName}}">
|
||||
{{!--fallback--}}
|
||||
Your browser does not support the <code>video</code> element.
|
||||
</video>
|
||||
{{else}}
|
||||
<video class="asset-display" autoplay controls>
|
||||
<source src="/media/{{fileInfo.fileName}}">
|
||||
{{!--fallback--}}
|
||||
Your browser does not support the <code>video</code> element.
|
||||
</video>
|
||||
{{/ifConditional}}
|
||||
{{else}}
|
||||
<img class="asset-display" src="/media/{{fileInfo.fileName}}" />
|
||||
{{/ifConditional}}
|
||||
</a>
|
||||
|
|
@ -1,76 +1,99 @@
|
|||
<div class="panel">
|
||||
<h2>Title</h2>
|
||||
<p>{{fileInfo.title}}</>
|
||||
</div>
|
||||
<div class="panel links">
|
||||
<div class="row row--thin">
|
||||
{{fileInfo.title}}
|
||||
</div>
|
||||
<h2>Links</h2>
|
||||
{{!--short direct link to asset--}}
|
||||
<div class="share-option">
|
||||
<a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Permanent Short Link</a> (most convenient)
|
||||
<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
|
||||
<br/>
|
||||
<input type="text" id="short-link" class="link" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
|
||||
<button class="copy-button" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
|
||||
{{!-- short direct link to asset --}}
|
||||
<div class="row row--thin">
|
||||
<div class="column column--5">
|
||||
<a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a>
|
||||
<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
|
||||
<br/>
|
||||
<input type="text" id="short-link" class="input-disabled" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
|
||||
</div><div class="column column--4">
|
||||
<button class="copy-button" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
</div>
|
||||
{{!-- link to show route for asset--}}
|
||||
<div class="share-option">
|
||||
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Permanent Long Link</a> (fastest service)
|
||||
<div class="input-error" id="input-error-copy-long-link" hidden="true"></div>
|
||||
</br>
|
||||
<input type="text" id="long-link" class="link" readonly onclick="select()" spellcheck="false" value="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>
|
||||
<button class="copy-button" data-elementtocopy="long-link" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
{{!-- html text for embedding asset--}}
|
||||
<div class="share-option">
|
||||
Embed HTML
|
||||
<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
|
||||
<br/>
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='<video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/></video>'/>
|
||||
{{else}}
|
||||
<input type="text" id="embed-text" class="link" readonly onclick="select()" spellcheck="false" value='<img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" />'/>
|
||||
{{/ifConditional}}
|
||||
<button class="copy-button" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
{{!--markdown text using asset--}}
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
{{else}}
|
||||
<div class="share-option">
|
||||
Markdown
|
||||
<div class="input-error" id="input-error-copy-markdown-text" hidden="true"></div>
|
||||
<br/>
|
||||
<input type="text" id="markdown-text" class="link" readonly onclick="select()" spellcheck="false" value=''/>
|
||||
<button class="copy-button" data-elementtocopy="markdown-text" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
{{/ifConditional}}
|
||||
</div>
|
||||
<div class="panel">
|
||||
{{!-- html text for embedding asset--}}
|
||||
<div class="row row--thin">
|
||||
<div class="column column--5">
|
||||
Embed HTML
|
||||
<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
|
||||
<br/>
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
<input type="text" id="embed-text" class="input-disabled" readonly onclick="select()" spellcheck="false" value='<video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/></video>'/>
|
||||
{{else}}
|
||||
<input type="text" id="embed-text" class="input-disabled" readonly onclick="select()" spellcheck="false" value='<img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" />'/>
|
||||
{{/ifConditional}}
|
||||
</div><div class="column column--5">
|
||||
<button class="copy-button" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
</div>
|
||||
{{!-- more options --}}
|
||||
<!--<div hidden="true">-->
|
||||
<!--{{!-- long link to asset --}}-->
|
||||
<!--<div class="share-option">-->
|
||||
<!--<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Permanent Long Link</a> (fastest service)-->
|
||||
<!--<div class="input-error" id="input-error-copy-long-link" hidden="true"></div>-->
|
||||
<!--</br>-->
|
||||
<!--<input type="text" id="long-link" class="link" readonly onclick="select()" spellcheck="false" value="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>-->
|
||||
<!--<button class="copy-button" data-elementtocopy="long-link" onclick="copyToClipboard(event)">copy</button>-->
|
||||
<!--</div>-->
|
||||
<!--{{!-- optional: markdown text for non-videos--}}-->
|
||||
<!--{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}-->
|
||||
<!--{{else}}-->
|
||||
<!--<div class="share-option">-->
|
||||
<!--Markdown-->
|
||||
<!--<div class="input-error" id="input-error-copy-markdown-text" hidden="true"></div>-->
|
||||
<!--<br/>-->
|
||||
<!--<input type="text" id="markdown-text" class="link" readonly onclick="select()" spellcheck="false" value=''/>-->
|
||||
<!--<button class="copy-button" data-elementtocopy="markdown-text" onclick="copyToClipboard(event)">copy</button>-->
|
||||
<!--</div>-->
|
||||
<!--{{/ifConditional}}-->
|
||||
<!--</div>-->
|
||||
|
||||
<h2>Description</h2>
|
||||
<p>{{fileInfo.description}}</p>
|
||||
</div>
|
||||
<div class="panel">
|
||||
<div class="row row--thin">
|
||||
{{fileInfo.description}}
|
||||
</div>
|
||||
|
||||
<h2>Metadata</h2>
|
||||
<table class="metadata-table" style="table-layout: fixed">
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">Name</td>
|
||||
<td>{{fileInfo.name}}</td>
|
||||
</tr>
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">Claim Id</td>
|
||||
<td>{{fileInfo.claimId}}</td>
|
||||
</tr>
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">File Name</td>
|
||||
<td>{{fileInfo.fileName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left-column">File Type</td>
|
||||
<td>{{#if fileInfo.fileType}}
|
||||
{{fileInfo.fileType}}
|
||||
{{else}}
|
||||
unknown
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="row row--thin">
|
||||
<table class="metadata-table" style="table-layout: fixed">
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">Name</td>
|
||||
<td>{{fileInfo.name}}</td>
|
||||
</tr>
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">Claim Id</td>
|
||||
<td class="wrap-words">{{fileInfo.claimId}}</td>
|
||||
</tr>
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">File Name</td>
|
||||
<td>{{fileInfo.fileName}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="left-column">File Type</td>
|
||||
<td>{{#if fileInfo.fileType}}
|
||||
{{fileInfo.fileType}}
|
||||
{{else}}
|
||||
unknown
|
||||
{{/if}}
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script type ="text/javascript">
|
||||
function copyToClipboard(event){
|
||||
var elementToCopy = event.target.dataset.elementtocopy;
|
||||
var element = document.getElementById(elementToCopy);
|
||||
var errorElement = 'input-error-copy-text' + elementToCopy;
|
||||
element.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
} catch (err) {
|
||||
showError(errorElement, 'Oops, unable to copy');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,86 @@
|
|||
<div class="input-error" id="input-error-publish-submit" hidden="true"></div>
|
||||
<button id="publish-submit" onclick="publishSelectedImage(event)">Publish</button>
|
||||
<button onclick="resetPublishArea()">Reset</button>
|
||||
<button onclick="resetPublishArea()">Reset</button>
|
||||
|
||||
<script type="text/javascript" >
|
||||
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" >
|
||||
function resetPublishArea () {
|
||||
// reset the drop zone
|
||||
// remove staged files
|
||||
stagedFiles = null;
|
||||
// reset publish form inputs
|
||||
document.getElementById('claim-name-input').value = '';
|
||||
document.getElementById('publish-title').value = '';
|
||||
document.getElementById('publish-description').value = '';
|
||||
document.getElementById('publish-nsfw').checked = false;
|
||||
// clear any errors
|
||||
document.getElementById('input-error-file-selection').innerHTML = '';
|
||||
document.getElementById('input-error-claim-name').innerHTML = '';
|
||||
document.getElementById('input-error-publish-submit').innerHTML = '';
|
||||
document.getElementById('input-success-claim-name').hidden = true;
|
||||
}
|
||||
/* publish functions */
|
||||
// When a file is selected for publish, validate that file and
|
||||
// stage it so it will be ready when the publish button is clicked.
|
||||
function previewAndStageFile(selectedFile){
|
||||
const publishForm = document.getElementById('publish-form-wrapper');
|
||||
var previewHolder = document.getElementById('asset-preview-holder');
|
||||
var dropzone = document.getElementById('drop-zone-wrapper');
|
||||
var previewReader = new FileReader();
|
||||
var nameInput = document.getElementById('claim-name-input');
|
||||
// validate the file's name, type, and size
|
||||
try {
|
||||
validateFile(selectedFile);
|
||||
} catch (error) {
|
||||
showError('input-error-file-selection', error.message);
|
||||
return;
|
||||
}
|
||||
// set the image preview, if an image was provided
|
||||
if (selectedFile.type !== 'video/mp4') {
|
||||
previewReader.readAsDataURL(selectedFile);
|
||||
previewReader.onloadend = function () {
|
||||
previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
|
||||
};
|
||||
}
|
||||
// hide the drop zone
|
||||
dropzone.hidden = true;
|
||||
publishForm.hidden = false;
|
||||
// set the name input value to the image name if none is set yet
|
||||
if (nameInput.value === "") {
|
||||
var filename = selectedFile.name.substring(0, selectedFile.name.indexOf('.'))
|
||||
nameInput.value = cleanseClaimName(filename);
|
||||
checkClaimName(nameInput.value);
|
||||
}
|
||||
// store the selected file for upload
|
||||
stagedFiles = [selectedFile];
|
||||
}
|
||||
|
||||
// Validate the publish submission and then trigger publishing.
|
||||
function publishSelectedImage(event) {
|
||||
var claimName = document.getElementById('claim-name-input').value;
|
||||
var channelName = document.getElementById('channel-name-select').value;
|
||||
// prevent default so this script can handle submission
|
||||
event.preventDefault();
|
||||
// validate, submit, and handle response
|
||||
validateFilePublishSubmission(stagedFiles, claimName, channelName)
|
||||
.then(() => {
|
||||
uploader.submitFiles(stagedFiles);
|
||||
})
|
||||
.catch(error => {
|
||||
if (error.name === 'FileError') {
|
||||
showError(document.getElementById('input-error-file-selection'), error.message);
|
||||
} else if (error.name === 'NameError') {
|
||||
showError(document.getElementById('input-error-claim-name'), error.message);
|
||||
} else if (error.name === 'ChannelNameError'){
|
||||
console.log(error);
|
||||
showError(document.getElementById('input-error-channel-select'), error.message);
|
||||
} else {
|
||||
showError(document.getElementById('input-error-publish-submit'), error.message);
|
||||
}
|
||||
return;
|
||||
})
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,24 +1,10 @@
|
|||
|
||||
{{> topBar}}
|
||||
<div class="main">
|
||||
{{> asset}}
|
||||
</div>
|
||||
<div class="sidebar">
|
||||
{{> assetInfo}}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type ="text/javascript">
|
||||
function copyToClipboard(event){
|
||||
var elementToCopy = event.target.dataset.elementtocopy;
|
||||
var element = document.getElementById(elementToCopy);
|
||||
var errorElement = 'input-error-copy-text' + elementToCopy;
|
||||
element.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
} catch (err) {
|
||||
showError(errorElement, 'Oops, unable to copy');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<div class="row">
|
||||
<div class="column column--5 align-content-top">
|
||||
{{> asset}}
|
||||
</div><div class="column column--1">
|
||||
</div><div class="column column--4 align-content-top">
|
||||
{{> assetInfo}}
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Reference in a new issue