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

Media folder, trending layout, top bar css #119

Merged
bones7242 merged 3 commits from media-folder into master 2017-07-28 06:30:17 +02:00
Conversation 0 Commits 3 Files changed 9 +48 -50
9 changed files with 48 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
public/assets/css/componentStyle.css
View file

@ -22,7 +22,6 @@
} }
.top-bar-right { .top-bar-right {
vertical-align: text-bottom;
margin-left: 0.5em; margin-left: 0.5em;
} }
@ -166,13 +165,6 @@ button.copy-button {
list-style-type: none; list-style-type: none;
} }
/* meme */
canvas {
background-color: white;
width: 100%;
height: auto;
}
/* statistics */ /* statistics */
.totals-row { .totals-row {
border-top: 1px solid grey; border-top: 1px solid grey;
@ -194,12 +186,28 @@ canvas {
width: 100%; width: 100%;
} }
.top-bar-tagline {
clear: both;
text-align: left;
width: 100%;
}
} }
@media (max-width: 475px) { @media (max-width: 475px) {
div#publish-active-area {
margin-left: 2em;
margin-right: 2em;
}
.all-claims-img { .all-claims-img {
width:50%; width:50%;
} }
.top-bar-right {
display: none;
}
} }

5
routes/api-routes.js
View file

@ -8,11 +8,6 @@ const errorHandlers = require('../helpers/libraries/errorHandlers.js');
const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js'); const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js');
module.exports = (app, hostedContentPath) => { module.exports = (app, hostedContentPath) => {
// route to return a file directly
app.get('/api/streamFile/:name', ({ params }, res) => {
const filePath = `${hostedContentPath}/${params.name}`;
res.status(200).sendFile(filePath);
});
// route to run a claim_list request on the daemon // route to run a claim_list request on the daemon
app.get('/api/claim_list/:name', ({ headers, ip, originalUrl, params }, res) => { app.get('/api/claim_list/:name', ({ headers, ip, originalUrl, params }, res) => {
// google analytics // google analytics

23
speech.js
View file

@ -16,15 +16,15 @@ const db = require('./models'); // require our models for syncing
const logLevel = config.get('Logging.LogLevel'); const logLevel = config.get('Logging.LogLevel');
require('./config/loggerSetup.js')(logger, logLevel); require('./config/loggerSetup.js')(logger, logLevel);
// serve static files from public directory (css/js/img) // trust the proxy to get ip address for us
app.use(express.static(`${__dirname}/public`)); app.enable('trust proxy');
// add middleware
// configure express app app.use(express.static(`${__dirname}/public`)); // 'express.static' to serve static files from public directory
app.enable('trust proxy'); // trust the proxy to get ip address for us app.use(express.static(`${__dirname}/public`)); // 'express.static' to serve static files from public directory
app.use(bodyParser.json()); // for parsing application/json app.use(bodyParser.json()); // 'body parser' for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded app.use(bodyParser.urlencoded({ extended: true })); // 'body parser' for parsing application/x-www-form-urlencoded
app.use(siofu.router); app.use(siofu.router); // 'socketio-file-upload' router for uploading with socket.io
app.use((req, res, next) => { // logging middleware app.use((req, res, next) => { // custom logging middleware to log all incomming http requests
logger.verbose(`Request on ${req.originalUrl} from ${req.ip}`); logger.verbose(`Request on ${req.originalUrl} from ${req.ip}`);
next(); next();
}); });
@ -84,7 +84,10 @@ db.sequelize
logger.info('Retrieving daemon download directory'); logger.info('Retrieving daemon download directory');
return getDownloadDirectory(); return getDownloadDirectory();
}) })
.then(hostedContentPath => { // require routes & wrap in socket.io .then(hostedContentPath => {
// add the hosted content folder at a static path
app.use('/media', express.static(hostedContentPath));
// require routes & wrap in socket.io
require('./routes/api-routes.js')(app, hostedContentPath); require('./routes/api-routes.js')(app, hostedContentPath);
require('./routes/show-routes.js')(app); require('./routes/show-routes.js')(app);
require('./routes/serve-routes.js')(app); require('./routes/serve-routes.js')(app);

2
views/layouts/show.handlebars
View file

@ -13,7 +13,7 @@
<meta name="twitter:creator" content="@spee.ch"> <meta name="twitter:creator" content="@spee.ch">
<meta name="twitter:title" content="{{fileInfo.name}}"> <meta name="twitter:title" content="{{fileInfo.name}}">
<meta name="twitter:description" content="An image hosted via Spee.ch"> <meta name="twitter:description" content="An image hosted via Spee.ch">
<meta name="twitter:image" content="https://spee.ch/api/streamFile/{{fileInfo.fileName}}"> <meta name="twitter:image" content="https://spee.ch/media/{{fileInfo.fileName}}">
</head> </head>
<body> <body>
{{{ body }}} {{{ body }}}

4
views/partials/asset.handlebars
View file

@ -2,12 +2,12 @@
<div id="asset-placeholder"> <div id="asset-placeholder">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset" autoplay loop controls> <video class="show-asset" autoplay loop controls>
<source src="/api/streamFile/{{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}}
<img class="show-asset" src="/api/streamFile/{{fileInfo.fileName}}" /> <img class="show-asset" src="/media/{{fileInfo.fileName}}" />
{{/ifConditional}} {{/ifConditional}}
</div> </div>
</div> </div>

2
views/partials/footer.handlebars
View file

@ -1,3 +1,3 @@
<footer class="stop-float"> <footer class="stop-float">
<p>thanks for visiting spee.ch</p> <p> thanks for visiting spee.ch </p>
</footer> </footer>

6
views/partials/topBar.handlebars
View file

@ -1,9 +1,7 @@
<div class="top-bar"> <div class="top-bar">
<a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a> <a href="https://en.wikipedia.org/wiki/Freedom_of_information" target="_blank"><img id="logo" src="/assets/img/content-freedom-64px.png"/></a>
<h1 id="title"><a href="/">Spee.ch</a></h1><span class="top-bar-left">(beta)</span> <h1 id="title"><a href="/">Spee.ch</a></h1><span class="top-bar-left">(beta)</span>
<span class="top-bar-tagline">Open-source, decentralized image and video hosting.</span>
<a href="/about" class="top-bar-right">help</a>
<a href="https://github.com/lbryio/spee.ch" target="_blank" class="top-bar-right">source</a> <a href="https://github.com/lbryio/spee.ch" target="_blank" class="top-bar-right">source</a>
<a href="/about" class="top-bar-right">help</a>
<div class="top-bar-tagline">Open-source, decentralized image and video hosting.</div>
</div> </div>

26
views/partials/trendingAssets.handlebars
View file

@ -7,37 +7,31 @@
{{#unless this.nsfw}} {{#unless this.nsfw}}
<a href="/{{this.name}}/{{this.claimId}}"> <a href="/{{this.name}}/{{this.claimId}}">
{{#ifConditional this.fileType '===' 'video/mp4'}} {{#ifConditional this.fileType '===' 'video/mp4'}}
<video class="grid-item trending-video" controls> <video class="grid-item trending-video" controls onloadeddata="resetLayout()">
<source src="/api/streamFile/{{this.fileName}}"> <source src="/media/{{this.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}}
<img class="grid-item trending-image" src="/api/streamFile/{{this.fileName}}" /> <img class="grid-item trending-image" src="/media/{{this.fileName}}" onload="resetLayout()"/>
{{/ifConditional}} {{/ifConditional}}
</a> </a>
{{/unless}} {{/unless}}
{{/each}} {{/each}}
</div> </div>
</div> </div>
<script> <script>
var elem = document.querySelector('.grid'); var elem = document.querySelector('.grid');
var trendingImages = document.querySelectorAll('.trending-image');
var trendingVideos = document.querySelectorAll('.trending-video');
var msnry = new Masonry( elem, { var msnry = new Masonry( elem, {
itemSelector: '.grid-item' itemSelector: '.grid-item'
}); });
// after images are loaded, reset layout
for (var i = 0; i < trendingVideos.length; i++) { function resetLayout() {
trendingImages[i].addEventListener('load', function(){ console.log('resetting layout');
msnry.layout(); msnry.layout();
})
}
// after videos are loaded, reset layout
for (var i = 0; i < trendingVideos.length; i++) {
trendingVideos[i].addEventListener('loadeddata', function(){
msnry.layout();
})
} }
</script> </script>

4
views/showLite.handlebars
View file

@ -2,13 +2,13 @@
<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}"> <a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset-lite" autoplay loop controls> <video class="show-asset-lite" autoplay loop controls>
<source src="/api/streamFile/{{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}}
<img class="show-asset-lite" src="/api/streamFile/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/> <img class="show-asset-lite" src="/media/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/>
{{/ifConditional}} {{/ifConditional}}
</a> </a>
</div> </div>