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

Merge pull request #74 from lbryio/support-video

Browse source 
Support video
This commit is contained in:
Bill Bittner 2017-07-08 15:19:38 -07:00 committed by GitHub
commit 37ae40b39b
6 changed files with 32 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
config/development.json
View file

@ -9,7 +9,7 @@
},
"Database": {
"MySqlConnectionUri": "none",
"PublishUploadPath": "C:\\lbry\\speech\\hosted_content"
"PublishUploadPath": "C:\\lbry\\speech\\hosted_content\\"
},
"Logging": {
"LogLevel": "silly",

8
routes/api-routes.js
View file

@ -7,7 +7,15 @@ const { createPublishParams, validateFile } = require('../helpers/libraries/publ
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
const { postToStats, sendGoogleAnalytics } = require('../controllers/statsController.js');
const config = require('config');
const hostedContentPath = config.get('Database.PublishUploadPath');
module.exports = app => {
// route to run a claim_list request on the daemon
app.get('/api/streamFile/:name', ({ params, headers }, 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

37
routes/sockets-routes.js
View file

@ -1,5 +1,4 @@
const logger = require('winston');
const fs = require('fs');
const publishController = require('../controllers/publishController.js');
const publishHelpers = require('../helpers/libraries/publishHelpers.js');
const errorHandlers = require('../helpers/libraries/errorHandlers.js');
@ -57,42 +56,6 @@ module.exports = (app, siofu, hostedContentPath) => {
// to-do: remove the file if not done automatically
}
});
// handle asset requests
socket.on('asset-request', filePath => {
logger.debug('received a request for the following file', filePath);
fs.readFile(filePath, (err, assetBuffer) => {
if (err) {
logger.error('fs.readFile error', err);
return;
};
// set the data
const fileExtension = filePath.substring(filePath.lastIndexOf('.'));
let data = {
type : null,
buffer: assetBuffer.toString('base64'),
};
switch (fileExtension) {
case '.jpeg' || '.jpg':
data['type'] = 'image/jpeg';
break;
case '.gif':
data['type'] = 'image/gif';
break;
case '.png':
data['type'] = 'image/png';
break;
case '.mp4':
data['type'] = 'video/mp4';
break;
default:
data['type'] = 'image/jpeg';
logger.warn('showing file with unknown type as jpeg');
break;
}
// send the asset
socket.emit('asset-transfer', data);
});
});
// handle disconnect
socket.on('disconnect', () => {
logger.silly('a user disconnected via sockets');

42
views/partials/asset.handlebars
View file

@ -1,35 +1,13 @@
<div class="panel">
<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
<p> loading... </p>
<div id="asset-placeholder" data-filename="{{{fileInfo.fileName}}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset" autoplay controls>
<source src="/api/streamFile/{{fileInfo.fileName}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{else}}
<img class="show-asset src="/api/streamFile/{{fileInfo.fileName}}" />
{{/ifConditional}}
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
var filePath = document.getElementById('asset-placeholder').dataset.filepath;
if (filePath) {
// send request for the file
socket.emit('asset-request', filePath);
// update the html
document.getElementById('asset-placeholder').innerHTML = '<p>Loading...</p><div id="progress-bar"></div>';
// start a progress animation
createProgressBar(document.getElementById('progress-bar'), 12);
}
// wait for the file to be sent
socket.on('asset-transfer', function(data) {
switch (data.type) {
case 'image/jpeg':
case 'image/gif':
case 'image/png':
const base64Image = 'data:' + data.type + ';base64,' + data.buffer;
document.getElementById("asset-placeholder").innerHTML = '<img class="show-asset" src="' + base64Image + '"/>';
break;
case 'video/mp4':
const base64video = 'data:' + data.type + ';base64,' + data.buffer;
document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset" controls> <source src="' + base64video + '"></video>';
break;
default: break;
}
});
</script>

2
views/partials/assetInfo.handlebars
View file

@ -13,7 +13,7 @@
Embed HTML
<br/>
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;video controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />&lt;/video>'/>
<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;video autoplay controls>&lt;source src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />&lt;/video>'/>
{{else}}
<input type="text" id="embed-text" class="link" readonly="true" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.name}}/{{fileInfo.claimId}}" />'/>
{{/ifConditional}}

42
views/showLite.handlebars
View file

@ -1,33 +1,11 @@
<div id="asset-placeholder" data-filepath="{{{fileInfo.filePath}}}">
<p> loading... </p>
<div id="asset-placeholder" data-filename="{{{fileInfo.fileName}}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<video class="show-asset-lite" autoplay controls>
<source src="/api/streamFile/{{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}}" />
{{/ifConditional}}
</div>
<script src="/socket.io/socket.io.js"></script>
<script type="text/javascript">
var socket = io();
var filePath = document.getElementById('asset-placeholder').dataset.filepath;
if (filePath) {
// send request for the file
socket.emit('asset-request', filePath);
// update the html
document.getElementById('asset-placeholder').innerHTML = '<p>Loading...</p><div id="progress-bar"></div>';
// start a progress animation
createProgressBar(document.getElementById('progress-bar'), 12);
}
// wait for the file to be sent
socket.on('asset-transfer', function(data) {
switch (data.type) {
case 'image/jpeg':
case 'image/gif':
case 'image/png':
const base64Image = 'data:' + data.type + ';base64,' + data.buffer;
document.getElementById("asset-placeholder").innerHTML = '<img class="show-asset-lite" src="' + base64Image + '"/>';
break;
case 'video/mp4':
const base64video = 'data:' + data.type + ';base64,' + data.buffer;
document.getElementById("asset-placeholder").innerHTML = '<video class="show-asset-lite" controls> <source src="' + base64video + '"></video>';
break;
default: break;
}
});
</script>