LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

updated show page to match upload

Browse source
This commit is contained in:
bill bittner 2017-10-10 10:14:43 -07:00
parent 1b37ef91a4
commit 0c80a76afe
13 changed files with 152 additions and 133 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
public/assets/css/general.css
View file

@ -102,6 +102,9 @@ h3 {
font-weight: normal; font-weight: normal;
} }
.input-text--large, .textarea--large, .title-show, .description-show {
font-size: 1.5rem;
}
/* COLUMNS AND ROWS */ /* COLUMNS AND ROWS */
.row { .row {
@ -212,12 +215,13 @@ input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-box-shadow: 0 0 0px 1000px white inset;
} }
.label, .input-text, .select, .textarea { .label, .input-text, .select, .textarea, .title-show {
margin: 0px; margin: 0px;
padding: 0.3em; padding: 0.3em;
outline: none; outline: none;
border: 0px; border: 0px;
background-color: white; background-color: white;
display: inline-block;
} }
.input-disabled { .input-disabled {
@ -234,7 +238,7 @@ option {
.input-checkbox { .input-checkbox {
border: 1px solid grey; border: 1px solid lightgrey;
background: white; background: white;
} }
@ -252,7 +256,7 @@ option {
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
/* modifiers */
.select--no-arrow { .select--no-arrow {
-moz-appearance:none; -moz-appearance:none;
-webkit-appearance: none; -webkit-appearance: none;
@ -265,8 +269,6 @@ option {
background: url('../img/down_triangle.png') no-repeat right; background: url('../img/down_triangle.png') no-repeat right;
padding-right: 1em; padding-right: 1em;
} }
/* modifiers */
.input-text--primary, .select--primary, .textarea--primary { .input-text--primary, .select--primary, .textarea--primary {
border-bottom: 1px solid grey; border-bottom: 1px solid grey;
} }
@ -276,7 +278,6 @@ option {
} }
.input-text--large, .select--large, .textarea--large { .input-text--large, .select--large, .textarea--large {
font-size: 1.5rem;
border-left: 1px solid grey; border-left: 1px solid grey;
} }
@ -428,11 +429,15 @@ table {
/* Show page */ /* Show page */
.asset-display { .video-show, .gifv-show, .image-show {
display: block; display: block;
width: 100%; width: 100%;
} }
.video-show {
}
/* item lists */ /* item lists */
.content-list-item { .content-list-item {

1
public/assets/js/constants.js Normal file
View file

@ -0,0 +1 @@
const EMAIL_FORMAT = 'ERROR_EMAIL_FORMAT';

12
public/assets/js/generalFunctions.js
View file

@ -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 // Create new error objects, that prototypically inherit from the Error constructor
function FileError(message) { function FileError(message) {
this.name = 'FileError'; this.name = 'FileError';

1
public/assets/js/validationFunctions.js
View file

@ -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.') 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 // validation function that checks to make sure the claim name is valid
function validateClaimName (name) { function validateClaimName (name) {
// ensure a name was entered // ensure a name was entered

53
views/about.handlebars
View file

@ -1,31 +1,28 @@
{{> topBar}} {{> topBar}}
<div class="row row--full-height"> <div class="row row--full-height">
<div class="column column--5 column--med-10 align-content-top"> <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">
<div class="row row--short"> <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> <span class="pull-quote">Open-source, decentralized image and video hosting</span>
<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>
<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>
</div> </div>
</div>
<script src="/assets/js/generalFunctions.js"></script>

21
views/index.handlebars
View file

@ -1,5 +1,3 @@
<script src="/assets/js/generalFunctions.js"></script>
{{> topBar}} {{> topBar}}
<div class="row row--full-height"> <div class="row row--full-height">
<div id="primary-dropzone-wrapper"> <div id="primary-dropzone-wrapper">
@ -43,14 +41,15 @@
<!-- description input --> <!-- description input -->
<textarea rows="2" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea> <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><div class="column column--5 column--med-10 align-content-top">
<div id="publish-status" class="row" hidden="true"></div> <div id="publish-status" class="row" hidden="true"></div>
<div id="publish-progress-bar" class="row" hidden="true"></div> <div id="publish-progress-bar" class="row" hidden="true"></div>
<div id="publish-active-area"> <div id="publish-active-area">
{{> publishForm-Channel}} {{> publishForm-Channel}}
{{> publishForm-Url}} {{> publishForm-Url}}
{{> publishForm-Thumbnail}} {{> publishForm-Thumbnail}}
{{> publishForm-Details}} {{> publishForm-Details}}
{{> publishForm-Submit}} {{> publishForm-Submit}}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -58,8 +57,6 @@
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/siofu/client.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"> <script typ="text/javascript">
checkCookie(); checkCookie();

6
views/layouts/main.handlebars
View file

@ -20,6 +20,10 @@
{{ googleAnalytics }} {{ googleAnalytics }}
</head> </head>
<body> <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> </body>
</html> </html>

8
views/layouts/show.handlebars
View file

@ -17,10 +17,10 @@
{{ googleAnalytics }} {{ googleAnalytics }}
</head> </head>
<body> <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> </body>
</html> </html>
<script>
</script>

3
views/login.handlebars
View file

@ -10,6 +10,3 @@
</div> </div>
</div> </div>
<script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/validationFunctions.js"></script>
<script src="/assets/js/authFunctions.js"></script>

6
views/partials/asset.handlebars
View file

@ -1,19 +1,19 @@
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"> <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
{{#ifConditional fileInfo.fileExt '===' 'gifv'}} {{#ifConditional fileInfo.fileExt '===' 'gifv'}}
<video class="asset-display" autoplay loop muted> <video class="gifv-show" autoplay loop muted>
<source src="/media/{{fileInfo.fileName}}"> <source src="/media/{{fileInfo.fileName}}">
{{!--fallback--}} {{!--fallback--}}
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{else}} {{else}}
<video class="asset-display" autoplay controls> <video class="video-show" controls poster="{{fileInfo.thumbnail}}">
<source src="/media/{{fileInfo.fileName}}"> <source src="/media/{{fileInfo.fileName}}">
{{!--fallback--}} {{!--fallback--}}
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{/ifConditional}} {{/ifConditional}}
{{else}} {{else}}
<img class="asset-display" src="/media/{{fileInfo.fileName}}" /> <img class="image-show" src="/media/{{fileInfo.fileName}}" />
{{/ifConditional}} {{/ifConditional}}
</a> </a>

118
views/partials/assetInfo.handlebars
View file

@ -1,60 +1,66 @@
<h2 class="h2--top">Title</h2> <div id="show-share-buttons">
<div class="row row--short"> <div class="row row--wide row--short">
{{fileInfo.title}} <div class="column column--2 column--sml-10">
</div> <h3>Share:</h3>
</div><div class="column column--8 column--sml-10">
<h2>Share</h2> <div class="row row--short">
<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}}"> <a target="_blank" href="https://twitter.com/intent/tweet?text=https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">twitter</a>
twitter </div>
</a> <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}}&amp;src=sdkpreparse"> <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}}&amp;src=sdkpreparse">facebook</a>
facebook </div>
</a> <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"> <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>
tublr </div>
</a> <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)"> <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>
reddit </div>
</a> </div>
</div> </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> </div>
</div> </div>
{{!-- html text for embedding asset--}} <div id="show-short-link">
<div class="row row--short"> <div class="row row--wide row--short">
<div class="column column--7"> <div class="column column--2 column--sml-10">
<p>Embed HTML</p> <h3>Link:</h3>
<div class="input-error" id="input-error-copy-embed-text" hidden="true"></div> </div><div class="column column--8 column--sml-10">
<br/> <div class="row row--short">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} <div class="column column--7">
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/> <div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
{{else}} <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()"/>
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/> </div><div class="column column--1"></div><div class="column column--2">
{{/ifConditional}} <button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
</div><div class="column column--1"></div><div class="column column--2"> </div>
<button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button> </div>
</div>
</div> </div>
</div> </div>
<h2>Description</h2> <div id="show-embed-code">
<div class="row row--short"> <div class="row row--wide row--short">
{{fileInfo.description}} <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='&lt;video width="100%" controls poster="{{fileInfo.thumbnail}}" src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
{{else}}
<input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;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> </div>
<h2>Metadata</h2> <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 class="row row--short"> <div id="show-details" hidden="true">
<table class="metadata-table" style="table-layout: fixed"> <table class="metadata-table" style="table-layout: fixed">
<tr class="metadata-row"> <tr class="metadata-row">
<td class="left-column">Name</td> <td class="left-column">Name</td>
@ -79,17 +85,3 @@
</tr> </tr>
</table> </table>
</div> </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>

11
views/partials/publishForm-Details.handlebars
View file

@ -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 id="publish-details" hidden="true">
<div class="row row--short"> <div class="row row--short">
@ -18,12 +24,7 @@
<input class="input-checkbox" type="checkbox" id="publish-nsfw"> <input class="input-checkbox" type="checkbox" id="publish-nsfw">
</div> </div>
</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> </div>

26
views/show.handlebars
View file

@ -1,11 +1,23 @@
{{> topBar}} {{> topBar}}
<div class="row"> <div class="row row--full-height">
<div class="column column--6 column--med-10 align-content-top"> <div class="column column--10">
{{> asset}} <!-- title -->
</div><div class="column column--4 column--med-10 align-content-top"> <span class="title-show">{{fileInfo.title}}</span>
<div class="row row--short">
{{> assetInfo}}
</div> </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> </div>