Skip to content

Commit e544dcf

Browse files
alfgalfg
authored
Merge pull request #18 from alfg/cleanup-queue-storage
chore: cleanup on storage and queue
2 parents 1491c52 + ec88f22 commit e544dcf

File tree

6 files changed

+140
-114
lines changed

6 files changed

+140
-114
lines changed

‎package-lock.json‎

Lines changed: 13 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ffmpeg-commander",
3-
"version": "0.7.0",
3+
"version": "0.7.1",
44
"scripts": {
55
"serve": "vue-cli-service serve",
66
"build": "vue-cli-service build",

‎src/components/Options.vue‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555

5656
<script>
5757
import form from '@/form';
58+
import storage from '@/storage';
5859
5960
const {
6061
extraOptions,
@@ -74,9 +75,9 @@ export default {
7475
};
7576
},
7677
async created() {
77-
this.extra = JSON.parse(window.localStorage.getItem('options')) || [];
78-
this.loglevel = JSON.parse(window.localStorage.getItem('loglevel')) || 'none';
79-
this.ffmpegd = window.localStorage.getItem('ffmpegd') === 'true';
78+
this.extra = storage.getItem('options') || [];
79+
this.loglevel = storage.getItem('loglevel') || 'none';
80+
this.ffmpegd = storage.getItem('ffmpegd');
8081
await this.update('extra', this.extra);
8182
await this.update('loglevel', this.loglevel);
8283
await this.update('ffmpegd', this.ffmpegd);
@@ -88,9 +89,9 @@ export default {
8889
},
8990
methods: {
9091
setSettingsStorage() {
91-
window.localStorage.setItem('options', JSON.stringify(this.extra));
92-
window.localStorage.setItem('loglevel', JSON.stringify(this.loglevel));
93-
window.localStorage.setItem('ffmpegd', this.ffmpegd);
92+
storage.setItem('options', this.extra);
93+
storage.setItem('loglevel', this.loglevel);
94+
storage.setItem('ffmpegd', this.ffmpegd);
9495
this.$store.setFfmpegdEnabled(this.ffmpegd);
9596
},
9697
update(key, value) {

‎src/components/Queue.vue‎

Lines changed: 101 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
:variant="['error', 'cancelled'].includes(data.item.status) ? 'danger' : 'primary'"
1616
>{{ data.item.status }}</b-badge>
1717
</template>
18+
1819
<template v-slot:cell(progress)="data">
1920
<b-progress
2021
v-if="data.item.status === 'encoding'"
@@ -49,55 +50,54 @@
4950
</template>
5051

5152
<template v-slot:row-details="row">
52-
<b-row class="mb-2">
53-
<b-col sm="2" class="text-sm-right"><b>Input:</b></b-col>
54-
<b-col>{{ row.item.input }}</b-col>
55-
</b-row>
56-
57-
<b-row class="mb-2">
58-
<b-col sm="2" class="text-sm-right"><b>Output:</b></b-col>
59-
<b-col>
60-
<a :href="videoUrl(row.item.output)" target="_blank">{{ row.item.output }}</a>
61-
</b-col>
62-
</b-row>
63-
64-
<b-row class="mb-2">
65-
<b-col sm="2" class="text-sm-right"><b>Payload:</b></b-col>
66-
<b-col>
53+
<b-row class="mb-2">
54+
<b-col sm="2" class="text-sm-right"><b>Input:</b></b-col>
55+
<b-col>{{ row.item.input }}</b-col>
56+
</b-row>
57+
58+
<b-row class="mb-2">
59+
<b-col sm="2" class="text-sm-right"><b>Output:</b></b-col>
60+
<b-col>
61+
<a :href="videoUrl(row.item.output)" target="_blank">{{ row.item.output }}</a>
62+
</b-col>
63+
</b-row>
64+
65+
<b-row class="mb-2">
66+
<b-col sm="2" class="text-sm-right"><b>Payload:</b></b-col>
67+
<b-col>
68+
<b-form-textarea
69+
class="code"
70+
rows="6"
71+
size="sm"
72+
readonly
73+
:value="JSON.stringify(row.item.payload, null, 2)"
74+
></b-form-textarea>
75+
</b-col>
76+
</b-row>
77+
78+
<b-row class="mb-2" v-if="row.item.status === 'completed'">
79+
<b-col sm="2" class="text-sm-right"><b>Preview:</b></b-col>
80+
<b-col>
81+
<video :src="videoUrl(row.item.output)" width="70%" controls muted />
82+
</b-col>
83+
</b-row>
84+
85+
<!-- Display error if recieved from message -->
86+
<b-row class="mb-2" v-if="row.item.error">
87+
<b-col sm="2" class="text-sm-right"><b>Error:</b></b-col>
88+
<b-col>
89+
<div class="code">
6790
<b-form-textarea
68-
class="code"
69-
rows="6"
70-
size="sm"
71-
readonly
72-
:value="JSON.stringify(row.item.payload, null, 2)"
91+
rows="3"
92+
max-rows="3"
93+
:value="JSON.stringify(row.item.error)"
7394
></b-form-textarea>
74-
</b-col>
75-
</b-row>
76-
77-
<b-row class="mb-2" v-if="row.item.status === 'completed'">
78-
<b-col sm="2" class="text-sm-right"><b>Preview:</b></b-col>
79-
<b-col>
80-
<video :src="videoUrl(row.item.output)" width="70%" controls muted />
81-
</b-col>
82-
</b-row>
83-
84-
<!-- Display error if recieved from message -->
85-
<b-row class="mb-2" v-if="row.item.error">
86-
<b-col sm="2" class="text-sm-right"><b>Error:</b></b-col>
87-
<b-col>
88-
<div class="code">
89-
<b-form-textarea
90-
rows="3"
91-
max-rows="3"
92-
:value="JSON.stringify(row.item.error)"
93-
></b-form-textarea>
94-
</div>
95-
</b-col>
96-
</b-row>
97-
95+
</div>
96+
</b-col>
97+
</b-row>
9898
</template>
9999
</b-table>
100-
<h2 class="text-center" v-if="items.length === 0">No Jobs Found</h2>
100+
<h2 class="text-center" v-if="items.length === 0">No Jobs in Queue</h2>
101101
</div>
102102
</template>
103103

@@ -106,6 +106,7 @@ import storage from '@/storage';
106106
import store from '@/store';
107107
108108
const WS_INTERVAL = 5000;
109+
const DEFAULT_VIDEO_HOST = 'http://127.0.0.1:8080';
109110
const Status = {
110111
QUEUED: 'queued',
111112
ENCODING: 'encoding',
@@ -117,8 +118,11 @@ const Status = {
117118
export default {
118119
name: 'Queue',
119120
created() {
121+
// Get items in queue store.
120122
this.getQueue();
121-
this.onMessage();
123+
124+
// Initialize websocket connecction.
125+
this.initWS();
122126
},
123127
data() {
124128
return {
@@ -142,66 +146,76 @@ export default {
142146
};
143147
},
144148
methods: {
145-
onMessage() {
149+
initWS() {
150+
// Check if the websocket connection is ready. If so, start queue and listen for messages.
146151
setInterval(() => {
147152
if (this.$ws.conn && this.$ws.conn.readyState === WebSocket.OPEN) {
148-
this.$ws.conn.onmessage = (event) => {
149-
const data = JSON.parse(event.data);
150-
this.percent = data.percent;
151-
this.speed = data.speed;
152-
this.fps = data.fps;
153-
this.err = data.err;
154-
155-
if (this.percent === 100) {
156-
this.setJobStatus(this.job.id, Status.COMPLETED);
157-
store.setIsEncoding(false);
158-
}
159-
160-
if (this.err) {
161-
this.setJobStatus(this.job.id, Status.ERROR);
162-
store.setIsEncoding(false);
163-
storage.set('queue', this.job.id, 'error', this.err);
164-
}
165-
};
166-
this.$ws.conn.onerror = () => {
167-
if (this.job.status !== Status.COMPLETED) {
168-
this.setJobStatus(this.job.id, Status.ERROR);
169-
}
170-
store.setIsEncoding(false);
171-
};
153+
this.$ws.conn.onmessage = this.onWSMessage;
154+
this.$ws.conn.onerror = this.onWSError;
172155
this.startQueue();
173156
}
174157
}, WS_INTERVAL);
175158
},
159+
160+
onWSMessage(event) {
161+
// On websocket message, update the progress details (or error).
162+
const data = JSON.parse(event.data);
163+
this.percent = data.percent;
164+
this.speed = data.speed;
165+
this.fps = data.fps;
166+
this.err = data.err;
167+
168+
// Set completed job.
169+
if (this.percent === 100) {
170+
this.setJobStatus(this.job.id, Status.COMPLETED);
171+
store.setIsEncoding(false);
172+
}
173+
174+
// Set errored job.
175+
if (this.err) {
176+
this.setJobStatus(this.job.id, Status.ERROR);
177+
store.setIsEncoding(false);
178+
storage.set('queue', this.job.id, 'error', this.err);
179+
}
180+
},
181+
182+
onWSError() {
183+
if (this.job.status !== Status.COMPLETED) {
184+
this.setJobStatus(this.job.id, Status.ERROR);
185+
}
186+
store.setIsEncoding(false);
187+
},
188+
176189
startQueue() {
177190
this.getQueue();
178191
179192
setInterval(() => {
180193
this.getQueue();
181194
195+
// Pass if job is already encoding.
182196
if (this.job.status && this.job.status === Status.ENCODING) {
183197
store.setIsEncoding(true);
184198
return;
185199
}
186200
187-
const job = this.getNextJob();
188-
if (!job.id) {
189-
return;
190-
}
191-
this.job = job;
201+
// Get next queued job if available.
202+
this.getNextJob();
192203
193-
this.sendEncode();
194-
}, 5000);
204+
if (this.job.id) this.sendEncode();
205+
}, WS_INTERVAL);
195206
},
207+
196208
getQueue() {
197209
this.items = storage.getAll('queue');
198210
},
211+
199212
getNextJob() {
200213
const filtered = this.items.filter(
201214
(item) => item.status === Status.QUEUED || item.status === Status.ENCODING,
202215
);
203-
return filtered[0] || {};
216+
this.job = filtered[0] || {};
204217
},
218+
205219
sendEncode() {
206220
this.$ws.conn.send(JSON.stringify({
207221
type: 'encode',
@@ -211,31 +225,33 @@ export default {
211225
}));
212226
this.setJobStatus(this.job.id, Status.ENCODING);
213227
},
228+
214229
setJobStatus(id, status) {
215230
this.job.status = status;
216231
storage.updateStatus('queue', id, status);
232+
this.getQueue();
217233
},
234+
218235
clearJobs() {
219236
storage.deleteAll('queue');
220237
this.getQueue();
221238
},
239+
222240
onClickCancel(id) {
223-
this.job.status = Status.CANCELLED;
224241
this.setJobStatus(id, Status.CANCELLED);
225-
this.getQueue();
226242
},
243+
227244
onClickRestart(id) {
228-
this.job.status = Status.QUEUED;
229245
this.setJobStatus(id, Status.QUEUED);
230-
this.getQueue();
231246
},
247+
232248
toggleDetails(id, enabled) {
233-
// eslint-disable-next-line no-underscore-dangle
234249
storage.toggleDetails('queue', id, !enabled);
235250
this.getQueue();
236251
},
252+
237253
videoUrl(output) {
238-
return `http://127.0.0.1:8080/${output}`;
254+
return `${DEFAULT_VIDEO_HOST}/${output}`;
239255
},
240256
},
241257
};

0 commit comments

Comments
 (0)