updated show page to match upload
This commit is contained in:
bill bittner
parent
1b37ef91a4
commit
0c80a76afe
13 changed files with 152 additions and 133 deletions
|
|
@ -102,6 +102,9 @@ h3 {
|
|||
font-weight: normal;
|
||||
}
|
||||
|
||||
.input-text--large, .textarea--large, .title-show, .description-show {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/* COLUMNS AND ROWS */
|
||||
|
||||
.row {
|
||||
|
|
@ -212,12 +215,13 @@ input:-webkit-autofill {
|
|||
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
||||
}
|
||||
|
||||
.label, .input-text, .select, .textarea {
|
||||
.label, .input-text, .select, .textarea, .title-show {
|
||||
margin: 0px;
|
||||
padding: 0.3em;
|
||||
outline: none;
|
||||
border: 0px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.input-disabled {
|
||||
|
|
@ -234,7 +238,7 @@ option {
|
|||
|
||||
|
||||
.input-checkbox {
|
||||
border: 1px solid grey;
|
||||
border: 1px solid lightgrey;
|
||||
background: white;
|
||||
}
|
||||
|
||||
|
|
@ -252,7 +256,7 @@ option {
|
|||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* modifiers */
|
||||
.select--no-arrow {
|
||||
-moz-appearance:none;
|
||||
-webkit-appearance: none;
|
||||
|
|
@ -265,8 +269,6 @@ option {
|
|||
background: url('../img/down_triangle.png') no-repeat right;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
/* modifiers */
|
||||
.input-text--primary, .select--primary, .textarea--primary {
|
||||
border-bottom: 1px solid grey;
|
||||
}
|
||||
|
|
@ -276,7 +278,6 @@ option {
|
|||
}
|
||||
|
||||
.input-text--large, .select--large, .textarea--large {
|
||||
font-size: 1.5rem;
|
||||
border-left: 1px solid grey;
|
||||
}
|
||||
|
||||
|
|
@ -428,11 +429,15 @@ table {
|
|||
|
||||
/* Show page */
|
||||
|
||||
.asset-display {
|
||||
.video-show, .gifv-show, .image-show {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-show {
|
||||
|
||||
}
|
||||
|
||||
/* item lists */
|
||||
|
||||
.content-list-item {
|
||||
|
|
|
|||
1
public/assets/js/constants.js
Normal file
1
public/assets/js/constants.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
const EMAIL_FORMAT = 'ERROR_EMAIL_FORMAT';
|
||||
|
|
@ -105,6 +105,18 @@ function checkCookie() {
|
|||
}
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
// Create new error objects, that prototypically inherit from the Error constructor
|
||||
function FileError(message) {
|
||||
this.name = 'FileError';
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ function validateFile(file) {
|
|||
throw new Error(file.type + ' is not a supported file type. Only, .jpeg, .png, .gif, and .mp4 files are currently supported.')
|
||||
}
|
||||
}
|
||||
|
||||
// validation function that checks to make sure the claim name is valid
|
||||
function validateClaimName (name) {
|
||||
// ensure a name was entered
|
||||
|
|
|
|||
|
|
@ -1,31 +1,28 @@
|
|||
{{> topBar}}
|
||||
<div class="row row--full-height">
|
||||
<div class="column column--5 column--med-10 align-content-top">
|
||||
<div class="row row--short">
|
||||
<span class="pull-quote">Open-source, decentralized image and video hosting</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>
|
||||
<a href="#">GITHUB</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">SLACK CHANNEL</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">DOCUMENTATION</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><div class="column column--5 column--med-10 align-content-top">
|
||||
{{> topBar}}
|
||||
<div class="row row--full-height">
|
||||
<div class="column column--5 column--med-10 align-content-top">
|
||||
<div class="row row--short">
|
||||
<p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
<p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p>
|
||||
<h3>[Contribute]</h3>
|
||||
<p>Spee.ch is an open source project. Please contribute to the existing site, or fork it and make your own!</p>
|
||||
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
|
||||
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
|
||||
<span class="pull-quote">Open-source, decentralized image and video hosting</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p>
|
||||
<a href="#">GITHUB</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">SLACK CHANNEL</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#">DOCUMENTATION</a>
|
||||
</p>
|
||||
</div>
|
||||
</div><div class="column column--5 column--med-10 align-content-top">
|
||||
<div class="row row--short">
|
||||
<p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
|
||||
<p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network. This means that your images are stored in multiple locations without a single point of failure.</p>
|
||||
<h3>[Contribute]</h3>
|
||||
<p>Spee.ch is an open source project. Please contribute to the existing site, or fork it and make your own!</p>
|
||||
<p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a href="https://github.com/lbryio/spee.ch">github repo</a> and go to town!</p>
|
||||
<p>If you want to improve spee.ch, join our <a href="https://lbry.slack.com">slack channel</a> or solve one of our <a href="https://github.com/lbryio/spee.ch/issues">github issues</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
|
||||
{{> topBar}}
|
||||
<div class="row row--full-height">
|
||||
<div id="primary-dropzone-wrapper">
|
||||
|
|
@ -43,14 +41,15 @@
|
|||
<!-- 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 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>
|
||||
|
|
@ -58,8 +57,6 @@
|
|||
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
<script src="/assets/js/validationFunctions.js"></script>
|
||||
<script src="/assets/js/publishFileFunctions.js"></script>
|
||||
<script typ="text/javascript">
|
||||
|
||||
checkCookie();
|
||||
|
|
|
|||
|
|
@ -20,6 +20,10 @@
|
|||
{{ googleAnalytics }}
|
||||
</head>
|
||||
<body>
|
||||
{{{ body }}}
|
||||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
<script src="/assets/js/validationFunctions.js"></script>
|
||||
<script src="/assets/js/publishFileFunctions.js"></script>
|
||||
<script src="/assets/js/authFunctions.js"></script>
|
||||
{{{ body }}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
{{ googleAnalytics }}
|
||||
</head>
|
||||
<body>
|
||||
{{{ body }}}
|
||||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
<script src="/assets/js/validationFunctions.js"></script>
|
||||
<script src="/assets/js/authFunctions.js"></script>
|
||||
{{{ body }}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
|
|
@ -10,6 +10,3 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/assets/js/generalFunctions.js"></script>
|
||||
<script src="/assets/js/validationFunctions.js"></script>
|
||||
<script src="/assets/js/authFunctions.js"></script>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
{{#ifConditional fileInfo.fileExt '===' 'gifv'}}
|
||||
<video class="asset-display" autoplay loop muted>
|
||||
<video class="gifv-show" 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>
|
||||
<video class="video-show" controls poster="{{fileInfo.thumbnail}}">
|
||||
<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}}" />
|
||||
<img class="image-show" src="/media/{{fileInfo.fileName}}" />
|
||||
{{/ifConditional}}
|
||||
</a>
|
||||
|
|
@ -1,60 +1,66 @@
|
|||
<h2 class="h2--top">Title</h2>
|
||||
<div class="row row--short">
|
||||
{{fileInfo.title}}
|
||||
</div>
|
||||
|
||||
<h2>Share</h2>
|
||||
<div class="row row--short">
|
||||
<a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
|
||||
twitter
|
||||
</a>
|
||||
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&src=sdkpreparse">
|
||||
facebook
|
||||
</a>
|
||||
<a target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=photo&title=Spee.ch%20%7C%20Share&caption=Shared%20From%20https://spee.ch%20A%20Decentralized%20Image%20Hosting%20Service%20Running%20On%20The%20LBRY%20Protocol%20&content=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}&tags=lbry%2C%20spee.ch%2C%20lbry.io&canonicalUrl=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&shareSource=tumblr_share_button">
|
||||
tublr
|
||||
</a>
|
||||
<a target="_blank" href="https://www.reddit.com/submit?url=http%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&title={{fileInfo.name}}(Decentralized%20Hosting%20Provided%20By%20Spee.ch%20Using%20the%20LBRY%20Protocol)">
|
||||
reddit
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h2>Links</h2>
|
||||
{{!-- short direct link to asset --}}
|
||||
<div class="row row--short">
|
||||
<div class="column column--7">
|
||||
<p><a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a></p>
|
||||
<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
|
||||
<br/>
|
||||
<input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
|
||||
</div><div class="column column--1"></div><div class="column column--2">
|
||||
<button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
|
||||
<div id="show-share-buttons">
|
||||
<div class="row row--wide row--short">
|
||||
<div class="column column--2 column--sml-10">
|
||||
<h3>Share:</h3>
|
||||
</div><div class="column column--8 column--sml-10">
|
||||
<div class="row row--short">
|
||||
<div class="column column--2">
|
||||
<a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">twitter</a>
|
||||
</div>
|
||||
<div class="column column--2">
|
||||
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&src=sdkpreparse">facebook</a>
|
||||
</div>
|
||||
<div class="column column--2">
|
||||
<a target="_blank" href="https://www.tumblr.com/widgets/share/tool?posttype=photo&title=Spee.ch%20%7C%20Share&caption=Shared%20From%20https://spee.ch%20A%20Decentralized%20Image%20Hosting%20Service%20Running%20On%20The%20LBRY%20Protocol%20&content=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}&tags=lbry%2C%20spee.ch%2C%20lbry.io&canonicalUrl=https%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&shareSource=tumblr_share_button">tublr</a>
|
||||
</div>
|
||||
<div class="column column--2">
|
||||
<a target="_blank" href="https://www.reddit.com/submit?url=http%3A%2F%2Fspee.ch%2F{{fileInfo.shortId}}%2F{{fileInfo.name}}.{{fileInfo.fileExt}}&title={{fileInfo.name}}(Decentralized%20Hosting%20Provided%20By%20Spee.ch%20Using%20the%20LBRY%20Protocol)">reddit</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{!-- html text for embedding asset--}}
|
||||
<div class="row row--short">
|
||||
<div class="column column--7">
|
||||
<p>Embed HTML</p>
|
||||
<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 input-text--full-width" 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 input-text--full-width" readonly onclick="select()" spellcheck="false" value='<img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
|
||||
{{/ifConditional}}
|
||||
</div><div class="column column--1"></div><div class="column column--2">
|
||||
<button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
|
||||
<div id="show-short-link">
|
||||
<div class="row row--wide row--short">
|
||||
<div class="column column--2 column--sml-10">
|
||||
<h3>Link:</h3>
|
||||
</div><div class="column column--8 column--sml-10">
|
||||
<div class="row row--short">
|
||||
<div class="column column--7">
|
||||
<div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
|
||||
<input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
|
||||
</div><div class="column column--1"></div><div class="column column--2">
|
||||
<button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Description</h2>
|
||||
<div class="row row--short">
|
||||
{{fileInfo.description}}
|
||||
<div id="show-embed-code">
|
||||
<div class="row row--wide row--short">
|
||||
<div class="column column--2 column--sml-10">
|
||||
<h3>Embed:</h3>
|
||||
</div><div class="column column--8 column--sml-10">
|
||||
<div class="row row--short">
|
||||
<div class="column column--7">
|
||||
<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
|
||||
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
|
||||
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='<video width="100%" controls poster="{{fileInfo.thumbnail}}" src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/></video>'/>
|
||||
{{else}}
|
||||
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='<img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
|
||||
{{/ifConditional}}
|
||||
</div><div class="column column--1"></div><div class="column column--2">
|
||||
<button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Metadata</h2>
|
||||
<div class="row row--short">
|
||||
<h3><a class="label" id="show-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="show-details">[more]</a></h3>
|
||||
<div id="show-details" hidden="true">
|
||||
<table class="metadata-table" style="table-layout: fixed">
|
||||
<tr class="metadata-row">
|
||||
<td class="left-column">Name</td>
|
||||
|
|
@ -79,17 +85,3 @@
|
|||
</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,9 @@
|
|||
<div class="row">
|
||||
<div class="column column--10">
|
||||
<a class="label" id="publish-details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="publish-details" hidden="true">
|
||||
|
||||
<div class="row row--short">
|
||||
|
|
@ -18,12 +24,7 @@
|
|||
<input class="input-checkbox" type="checkbox" id="publish-nsfw">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="column column--10">
|
||||
<a class="label" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="publish-details">[more]</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,23 @@
|
|||
|
||||
{{> topBar}}
|
||||
<div class="row">
|
||||
<div class="column column--6 column--med-10 align-content-top">
|
||||
{{> asset}}
|
||||
</div><div class="column column--4 column--med-10 align-content-top">
|
||||
<div class="row row--short">
|
||||
{{> assetInfo}}
|
||||
<div class="row row--full-height">
|
||||
<div class="column column--10">
|
||||
<!-- title -->
|
||||
<span class="title-show">{{fileInfo.title}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column column--5 column--med-10 align-content-top" >
|
||||
<!-- asset -->
|
||||
<div class="row">
|
||||
{{> asset}}
|
||||
</div>
|
||||
<div class="row row--wide">
|
||||
<span class="description-show">{{fileInfo.description}}</span>
|
||||
</div>
|
||||
</div><div class="column column--5 column--med-10 align-content-top">
|
||||
<!-- details -->
|
||||
<div class="row">
|
||||
{{> assetInfo}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Loading…
Reference in a new issue