mirror/spacedeck-open
1
0
Fork 0
mirror of https://github.com/spacedeck/spacedeck-open.git synced 2025-12-15 17:37:30 +01:00
Code Issues Projects Releases Wiki Activity

space: fix realtime artifact media conversion feedback for video, audio

Browse Source
This commit is contained in:
mntmn
2020-11-21 16:38:17 +01:00
parent 89f48e615f
commit 9a1e85fb94
8 changed files with 77 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
helpers/artifact_converter.js
View File

@@ -99,7 +99,7 @@ function convertVideo(fileName, filePath, codec, callback, progressCallback) {
var newExt = codec == "mp4" ? "mp4" : "ogv";
var convertedPath = filePath + "." + newExt;
console.log("converting", filePath, "to", convertedPath);
console.log("convertVideo", filePath, "to", convertedPath);
var convertArgs = (codec == "mp4") ? [
"-i", filePath,
@@ -229,7 +229,6 @@ function resizeAndUpload(a, size, max, fileName, localFilePath, callback) {
}
}
var resizeAndUploadImage = function(a, mimeType, size, fileName, fileNameOrg, imageFilePath, originalFilePath, payloadCallback) {
async.parallel({
small: function(callback){
@@ -453,7 +452,6 @@ module.exports = {
});
} else if (convertableAudioTypes.indexOf(mimeType) > -1) {
async.parallel({
ogg: function(callback) {
convertAudio(fileName, localFilePath, "ogg", function(err, file) {
@@ -471,18 +469,14 @@ module.exports = {
convertAudio(fileName, localFilePath, "mp3", function(err, file) {
if (err) callback(err);
else {
createWaveform(fileName, file, function(err, filePath) {
var keyName = "s" + a.space_id.toString() + "/a" + a._id.toString() + "/" + fileName + "-" + (new Date().getTime()) + ".png";
uploader.uploadFile(keyName, "image/png", filePath, function(err, pngUrl) {
var keyName = "s" + a.space_id.toString() + "/a" + a._id.toString() + "/" + fileName + ".mp3" ;
uploader.uploadFile(keyName, "audio/mp3", file, function(err, mp3Url) {
if (err) callback(err);
else callback(null, {waveform: pngUrl, mp3: mp3Url});
});
});
});
}
@@ -499,7 +493,6 @@ module.exports = {
if (err) payloadCallback(err, a);
else {
a.state = "idle";
a.mime = mimeType;
var stats = fs.statSync(localFilePath);
@@ -515,7 +508,6 @@ module.exports = {
];
a.updated_at = new Date();
db.packArtifact(a);
a.save().then(function() {
@@ -559,5 +551,3 @@ module.exports = {
});
}
};

8
middlewares/api_helpers.js
View File

@@ -17,9 +17,15 @@ module.exports = (req, res, next) => {
this.status(201).json(object);
};
res['distributeUpdate'] = function(model, object) {
res['distributeUpdate'] = function(model, object, sendToSelf) {
if (!object) return;
if (sendToSelf) {
// send this update to the initiating user, for example when
// a conversion task has finished
redis.sendMessage("update-self", model, object, req.channelId);
} else {
redis.sendMessage("update", model, object, req.channelId);
}
this.status(200).json(object);
};

4
public/javascripts/spacedeck_sections.js
View File

@@ -1602,12 +1602,8 @@ var SpacedeckSections = {
if (this.guest_nickname) {
new_item.editor_name = this.guest_nickname;
}
// console.log("new artifact", new_item);
save_artifact(new_item, function(saved_item) {
// console.log("saved artifact", saved_item);
this.update_board_artifact_viewmodel(saved_item);
this.active_space_artifacts.push(saved_item);

10
public/javascripts/spacedeck_websockets.js
View File

@@ -40,7 +40,11 @@ SpacedeckWebsockets = {
}
} else console.log("artifact created in another space.");
}
else if (msg.action == "update" && msg.object) {
else if ((msg.action == "update" || msg.action == "update-self") && msg.object) {
if (msg.action == "update-self") {
console.log(msg.object);
}
if (this.active_space) {
var o = msg.object;
if (o && o._id) {
@@ -185,7 +189,7 @@ SpacedeckWebsockets = {
return;
}
if (msg.channel_id == channel_id) {
if (msg.channel_id == channel_id && !msg.action.match("-self")) {
return;
}
@@ -199,7 +203,7 @@ SpacedeckWebsockets = {
this.handle_presenter_media_update(msg);
}
if (msg.action == "update" || msg.action == "create" || msg.action == "delete"){
if (msg.action == "update" || msg.action == "update-self" || msg.action == "create" || msg.action == "delete") {
this.handle_live_updates(msg);
}

3
public/stylesheets/style.css
View File

@@ -15350,7 +15350,8 @@ body:not(.present-mode) #space .artifact.selected {
padding: 10px;
background-color: #3d9ee9;
opacity: 0.9;
text-align: center; }
text-align: center;
font-size: 14px; }
.artifact.state-processing .progress-text, .artifact.state-uploading .progress-text {
text-align: center;
padding: 8px;

18
routes/api/space_artifacts.js
View File

@@ -114,7 +114,7 @@ router.post('/', function(req, res, next) {
});
router.post('/:artifact_id/payload', function(req, res, next) {
if (req.spaceRole == "editor"  ||  req.spaceRole == "admin") {
if (req.spaceRole == "editor" || req.spaceRole == "admin") {
var a = req.artifact;
var fileName = (req.query.filename || "upload.bin").replace(/[^a-zA-Z0-9_\-\.]/g, '');
@@ -124,10 +124,21 @@ router.post('/:artifact_id/payload', function(req, res, next) {
var stream = req.pipe(writeStream);
var progressCallback = function(progressMsg) {
// merge progress message with any other changes (size/location)
db.Artifact.findOne({where: {
_id: a._id
}}).then(a => {
if (a) {
a.description = progressMsg.toString();
db.packArtifact(a);
a.save();
redis.sendMessage("update", "Artifact", a, req.channelId);
db.unpackArtifact(a);
redis.sendMessage("update-self", "Artifact", a, req.channelId);
} else {
// artifact has been deleted
// TODO: stop conversion process!
}
});
};
stream.on('finish', function() {
@@ -135,7 +146,8 @@ router.post('/:artifact_id/payload', function(req, res, next) {
if (error) res.status(400).json(error);
else {
db.Space.update({ updated_at: new Date() }, {where: {_id: req.space._id}});
res.distributeUpdate("Artifact", artifact);
db.unpackArtifact(artifact);
res.distributeUpdate("Artifact", artifact, true);
}
}, progressCallback);
});

1
styles/artifact.scss
View File

@@ -570,6 +570,7 @@ body:not(.present-mode) {
background-color: $blue;
opacity: 0.9;
text-align: center;
font-size: 14px;
}
.progress-text {
text-align: center;

14
views/partials/space.html
View File

@@ -141,8 +141,8 @@
<div class="progress" v-bind:style="{width: a.view.progress+'%'}"></div>
<div class="progress-text">{{a.description}}</div>
<video v-if="a.mime == 'image/gif' && a.payload_alternatives && a.payload_alternatives.length > 0" preload autoplay loop>
<source v-for="rep in a.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
<video v-if="a.mime == 'image/gif' && a.view.payload_alternatives && a.view.payload_alternatives.length > 0" preload autoplay loop>
<source v-for="rep in a.view.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
</video>
<span v-if="a.view.link.length>0" class="link-wrapper">
@@ -153,8 +153,8 @@
<!-- video -->
<div v-if="a.view.major_type == 'video'" v-videoplayer="a" class="video" v-bind:style="a.view.inner_style">
<video preload="metadata" v-bind:poster="a.view.thumbnail_uri">
<source v-for="rep in a.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
<source v-if="a.payload_uri && a.mime" v-bind:src="a.payload_uri" v-bind:type="a.mime" />
<source v-for="rep in a.view.payload_alternatives" v-bind:src="rep.payload_uri" v-bind:type="rep.mime" />
<source v-if="a.view.payload_uri && a.view.mime" v-bind:src="a.view.payload_uri" v-bind:type="a.view.mime" />
</video>
<div class="tl-controls">
@@ -181,11 +181,11 @@
<div v-if="a.view.major_type == 'audio'" v-audioplayer="a" class="audio" v-bind:style="a.view.inner_style">
<audio>
<source v-for="alt in a.payload_alternatives | orderBy 'mime' -1" v-bind:src="alt.payload_uri" v-bind:type="alt.mime"/>
<source v-bind:src="a.payload_uri" v-bind:type="a.mime" v-if="a.payload_uri"/>
<source v-for="alt in a.view.payload_alternatives | orderBy 'mime' -1" v-bind:src="alt.payload_uri" v-bind:type="alt.mime"/>
<source v-bind:src="a.view.payload_uri" v-bind:type="a.view.mime" v-if="a.view.payload_uri"/>
</audio>
<div class="timeline" v-show="a.h>=64 && a.w>=170" v-bind:style="{'background-image': 'url(' + a.payload_thumbnail_web_uri +')'}">
<div class="timeline" v-show="a.h>=64 && a.w>=170" v-bind:style="{'background-image': 'url(' + a.view.thumbnail_uri +')'}">
<div class="tl-current-time" v-bind:style="{width: a.player_view.current_time_float*100 + '%'}"></div>
<div class="tl-inpoint" v-bind:style="{left: a.player_view.inpoint_float*100 + '%'}" v-if="a.player_view.inpoint_float>0.0"></div>
<div class="tl-outpoint" v-bind:style="{left: a.player_view.outpoint_float*100 + '%'}"></div>