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 {
vertical-align: text-bottom;
margin-left: 0.5em;
}
@ -166,13 +165,6 @@ button.copy-button {
list-style-type: none;
}
/* meme */
canvas {
background-color: white;
width: 100%;
height: auto;
}
/* statistics */
.totals-row {
border-top: 1px solid grey;
@ -194,12 +186,28 @@ canvas {
width: 100%;
}
.top-bar-tagline {
clear: both;
text-align: left;
width: 100%;
}
}
@media (max-width: 475px) {
div#publish-active-area {
margin-left: 2em;
margin-right: 2em;
}
.all-claims-img {
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');
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
app.get('/api/claim_list/:name', ({ headers, ip, originalUrl, params }, res) => {
// 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');
require('./config/loggerSetup.js')(logger, logLevel);
// serve static files from public directory (css/js/img)
app.use(express.static(`${__dirname}/public`));
// configure express app
app.enable('trust proxy'); // trust the proxy to get ip address for us
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
app.use(siofu.router);
app.use((req, res, next) => { // logging middleware
// trust the proxy to get ip address for us
app.enable('trust proxy');
// add middleware
app.use(express.static(`${__dirname}/public`)); // 'express.static' to serve static files from public directory
app.use(express.static(`${__dirname}/public`)); // 'express.static' to serve static files from public directory
app.use(bodyParser.json()); // 'body parser' for parsing application/json
app.use(bodyParser.urlencoded({ extended: true })); // 'body parser' for parsing application/x-www-form-urlencoded
app.use(siofu.router); // 'socketio-file-upload' router for uploading with socket.io
app.use((req, res, next) => { // custom logging middleware to log all incomming http requests
logger.verbose(`Request on ${req.originalUrl} from ${req.ip}`);
next();
});
@ -84,7 +84,10 @@ db.sequelize
logger.info('Retrieving daemon download directory');
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/show-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:title" content="{{fileInfo.name}}">
<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>
<body>
{{{ body }}}

4
views/partials/asset.handlebars
View file

@ -2,12 +2,12 @@
<div id="asset-placeholder">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset" autoplay loop controls>
<source src="/api/streamFile/{{fileInfo.fileName}}">
<source src="/media/{{fileInfo.fileName}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{else}}
<img class="show-asset" src="/api/streamFile/{{fileInfo.fileName}}" />
<img class="show-asset" src="/media/{{fileInfo.fileName}}" />
{{/ifConditional}}
</div>
</div>

6
views/partials/topBar.handlebars
View file

@ -1,9 +1,7 @@
<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>
<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="/about" class="top-bar-right">help</a>
<div class="top-bar-tagline">Open-source, decentralized image and video hosting.</div>
</div>

24
views/partials/trendingAssets.handlebars
View file

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

4
views/showLite.handlebars
View file

@ -2,13 +2,13 @@
<a href="/{{fileInfo.name}}/{{fileInfo.claimId}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset-lite" autoplay loop controls>
<source src="/api/streamFile/{{fileInfo.fileName}}">
<source src="/media/{{fileInfo.fileName}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{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}}
</a>
</div>