Skip to content

Commit e9a0e8e

Browse files
cld9xcld9x
committed
Updated to latest buefy
1 parent 45e0d5b commit e9a0e8e

File tree

7 files changed

+1241
-772
lines changed

7 files changed

+1241
-772
lines changed

‎.editorconfig‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,9 @@ indent_size = 2
1010
[{*.go,go.mod,go.sum}]
1111
indent_style = tab
1212
indent_size = 4
13+
14+
[*.{js,jsx,ts,tsx,vue}]
15+
indent_style = space
16+
indent_size = 2
17+
trim_trailing_whitespace = true
18+
insert_final_newline = true

‎package.json‎

Lines changed: 34 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,52 @@
22
"name": "xbvr",
33
"private": true,
44
"scripts": {
5-
"dev": "concurrently 'npm:dev:ui' 'npm:dev:go'",
65
"serve": "cd ui && vue-cli-service serve",
76
"build": "cd ui && vue-cli-service build",
87
"lint": "cd ui && vue-cli-service lint",
98
"i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'",
109
"i18n:extract": "yarn vue-i18n-extract report -v './ui/src/**/*.?(js|vue)' -l './ui/src/locales/*.?(js|json)'",
11-
"dev:ui": "cd ui && vue-cli-service build --watch --silent",
12-
"dev:go": "air"
10+
"dev": "concurrently 'npm:dev:ui' 'npm:dev:go'",
11+
"dev:go": "air",
12+
"dev:ui": "cd ui && vue-cli-service build --watch --silent"
1313
},
1414
"dependencies": {
15-
"@fortawesome/fontawesome-free": "5.13.1",
15+
"@fortawesome/fontawesome-free": "5.15.1",
1616
"@fortawesome/fontawesome-svg-core": "1.2.32",
17-
"@mdi/font": "5.3.45",
18-
"buefy": "0.8.20",
17+
"@mdi/font": "5.8.55",
18+
"buefy": "0.9.4",
1919
"bulma-extensions": "6.2.7",
20-
"date-fns": "2.14.0",
21-
"ky": "0.21.0",
22-
"pretty-bytes": "5.3.0",
23-
"videojs-hotkeys": "0.2.26",
20+
"date-fns": "2.16.1",
21+
"ky": "0.25.1",
22+
"pretty-bytes": "5.4.1",
23+
"videojs-hotkeys": "0.2.27",
2424
"videojs-vr": "1.7.1",
2525
"vue": "2.6.12",
26-
"vue-debounce": "2.5.7",
26+
"vue-debounce": "2.5.8",
2727
"vue-gallery": "2.0.1",
28-
"vue-global-events": "1.1.2",
29-
"vue-i18n": "8.18.2",
30-
"vue-load-image": "0.1.11",
31-
"vue-router": "3.3.4",
32-
"vue-slider-component": "3.2.7",
33-
"vue-star-rating": "1.6.1",
34-
"vuex": "3.5.1",
35-
"wampy": "6.2.2"
28+
"vue-global-events": "1.2.1",
29+
"vue-i18n": "8.22.2",
30+
"vue-load-image": "0.1.12",
31+
"vue-router": "3.4.9",
32+
"vue-slider-component": "3.2.11",
33+
"vue-star-rating": "1.7.0",
34+
"vuex": "3.6.0",
35+
"wampy": "6.3.0"
3636
},
3737
"devDependencies": {
38-
"@vue/cli-plugin-babel": "4.4.6",
39-
"@vue/cli-plugin-eslint": "4.4.6",
40-
"@vue/cli-service": "4.4.6",
41-
"babel-eslint": "10.1.0",
42-
"concurrently": "5.2.0",
43-
"eslint": "7.4.0",
44-
"eslint-plugin-vue": "6.2.2",
45-
"less": "3.11.3",
38+
"@vue/cli-plugin-babel": "4.5.9",
39+
"@vue/cli-plugin-eslint": "~4.5.0",
40+
"@vue/cli-service": "4.5.9",
41+
"@vue/eslint-config-standard": "^5.1.2",
42+
"babel-eslint": "^10.1.0",
43+
"concurrently": "5.3.0",
44+
"eslint": "7.16.0",
45+
"eslint-plugin-import": "^2.20.2",
46+
"eslint-plugin-node": "^11.1.0",
47+
"eslint-plugin-promise": "^4.2.1",
48+
"eslint-plugin-standard": "^4.0.0",
49+
"eslint-plugin-vue": "7.3.0",
50+
"less": "3.12.2",
4651
"less-loader": "6.2.0",
4752
"node-sass": "4.14.1",
4853
"sass-loader": "9.0.2",
@@ -58,7 +63,8 @@
5863
},
5964
"extends": [
6065
"plugin:vue/essential",
61-
"eslint:recommended"
66+
"eslint:recommended",
67+
"@vue/standard"
6268
],
6369
"rules": {},
6470
"parserOptions": {

‎ui/src/views/files/List.vue‎

Lines changed: 113 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,53 @@
44
<div class="column">
55
<b-loading :is-full-page="true" :active.sync="isLoading"></b-loading>
66
<div v-if="items.length > 0 && !isLoading">
7-
<b-table :data="items" ref="table" backend-sorting :default-sort="[sortField, sortOrder]" @sort="onSort" :paginated="true">
8-
<template slot-scope="props">
9-
<b-table-column style="word-break:break-all;" class="is-one-fifth" field="filename" :label="$t('File')"
10-
sortable>
11-
{{props.row.filename}}
12-
<br/><small>{{props.row.path}}</small>
13-
</b-table-column>
14-
<b-table-column field="created_time" :label="$t('Created')" style="white-space: nowrap;" sortable>
15-
{{format(parseISO(props.row.created_time), "yyyy-MM-dd hh:mm:ss")}}
16-
</b-table-column>
17-
<b-table-column field="size" :label="$t('Size')" style="white-space: nowrap;" sortable>
18-
{{prettyBytes(props.row.size)}}
19-
</b-table-column>
20-
<b-table-column field="video_width" :label="$t('Width')" sortable>
21-
<span v-if="props.row.video_width !== 0">{{props.row.video_width}}</span>
22-
<span v-else>-</span>
23-
</b-table-column>
24-
<b-table-column field="video_height" :label="$t('Height')" sortable>
25-
<span v-if="props.row.video_height !== 0">{{props.row.video_height}}</span>
26-
<span v-else>-</span>
27-
</b-table-column>
28-
<b-table-column field="video_bitrate" :label="$t('Bitrate')" style="white-space: nowrap;" sortable>
29-
<span v-if="props.row.video_bitrate !== 0">{{prettyBytes(props.row.video_bitrate)}}</span>
30-
<span v-else>-</span>
31-
</b-table-column>
32-
<b-table-column field="duration" :label="$t('Duration')" style="white-space: nowrap;" sortable>
33-
<span v-if="props.row.duration !== 0">{{humanizeSeconds(props.row.duration)}}</span>
34-
<span v-else>-</span>
35-
</b-table-column>
36-
<b-table-column field="video_avgfps_val" :label="$t('FPS')" style="white-space: nowrap;" sortable>
37-
<span v-if="props.row.video_avgfps_val !== 0">{{props.row.video_avgfps_val}}</span>
38-
<span v-else>-</span>
39-
</b-table-column>
40-
<b-table-column style="white-space: nowrap;">
41-
<b-button @click="play(props.row)">{{$t('Play')}}</b-button>
42-
&nbsp;
43-
<b-button v-if="props.row.scene_id === 0" @click="match(props.row)">{{$t('Match')}}</b-button>
44-
<b-button v-else disabled>{{$t('Match')}}</b-button>
45-
&nbsp;
46-
<button class="button is-danger is-outlined" @click='removeFile(props.row)'>
47-
<b-icon pack="fas" icon="trash"></b-icon>
48-
</button>
49-
</b-table-column>
50-
</template>
7+
<b-table :data="items" ref="table" backend-sorting :default-sort="[sortField, sortOrder]" @sort="onSort"
8+
:paginated="true">
9+
<b-table-column style="word-break:break-all;" class="is-one-fifth" field="filename" :label="$t('File')"
10+
sortable v-slot="props">
11+
{{ props.row.filename }}
12+
<br/><small>{{ props.row.path }}</small>
13+
</b-table-column>
14+
<b-table-column field="created_time" :label="$t('Created')" style="white-space: nowrap;" sortable
15+
v-slot="props">
16+
{{ format(parseISO(props.row.created_time), "yyyy-MM-dd hh:mm:ss") }}
17+
</b-table-column>
18+
<b-table-column field="size" :label="$t('Size')" style="white-space: nowrap;" sortable v-slot="props">
19+
{{ prettyBytes(props.row.size) }}
20+
</b-table-column>
21+
<b-table-column field="video_width" :label="$t('Width')" sortable v-slot="props">
22+
<span v-if="props.row.video_width !== 0">{{ props.row.video_width }}</span>
23+
<span v-else>-</span>
24+
</b-table-column>
25+
<b-table-column field="video_height" :label="$t('Height')" sortable v-slot="props">
26+
<span v-if="props.row.video_height !== 0">{{ props.row.video_height }}</span>
27+
<span v-else>-</span>
28+
</b-table-column>
29+
<b-table-column field="video_bitrate" :label="$t('Bitrate')" style="white-space: nowrap;" sortable
30+
v-slot="props">
31+
<span v-if="props.row.video_bitrate !== 0">{{ prettyBytes(props.row.video_bitrate) }}</span>
32+
<span v-else>-</span>
33+
</b-table-column>
34+
<b-table-column field="duration" :label="$t('Duration')" style="white-space: nowrap;" sortable
35+
v-slot="props">
36+
<span v-if="props.row.duration !== 0">{{ humanizeSeconds(props.row.duration) }}</span>
37+
<span v-else>-</span>
38+
</b-table-column>
39+
<b-table-column field="video_avgfps_val" :label="$t('FPS')" style="white-space: nowrap;" sortable
40+
v-slot="props">
41+
<span v-if="props.row.video_avgfps_val !== 0">{{ props.row.video_avgfps_val }}</span>
42+
<span v-else>-</span>
43+
</b-table-column>
44+
<b-table-column style="white-space: nowrap;" v-slot="props">
45+
<b-button @click="play(props.row)">{{ $t('Play') }}</b-button>
46+
&nbsp;
47+
<b-button v-if="props.row.scene_id === 0" @click="match(props.row)">{{ $t('Match') }}</b-button>
48+
<b-button v-else disabled>{{ $t('Match') }}</b-button>
49+
&nbsp;
50+
<button class="button is-danger is-outlined" @click='removeFile(props.row)'>
51+
<b-icon pack="fas" icon="trash"></b-icon>
52+
</button>
53+
</b-table-column>
5154
</b-table>
5255
</div>
5356
<div v-if="items.length === 0 && !isLoading">
@@ -60,7 +63,7 @@
6063
</span>
6164
</h1>
6265
<h2 class="subtitle">
63-
{{$t('No files matching your selection')}}
66+
{{ $t('No files matching your selection') }}
6467
</h2>
6568
</div>
6669
</div>
@@ -72,78 +75,78 @@
7275
</template>
7376

7477
<script>
75-
import prettyBytes from "pretty-bytes";
76-
import {format, parseISO} from "date-fns";
77-
import ky from "ky";
78+
import prettyBytes from "pretty-bytes";
79+
import {format, parseISO} from "date-fns";
80+
import ky from "ky";
7881
79-
export default {
80-
name: "List",
81-
data() {
82-
return {
83-
files: [],
84-
prettyBytes,
85-
format,
86-
parseISO,
87-
sortField: 'created_time',
88-
sortOrder: 'desc',
89-
}
82+
export default {
83+
name: "List",
84+
data() {
85+
return {
86+
files: [],
87+
prettyBytes,
88+
format,
89+
parseISO,
90+
sortField: 'created_time',
91+
sortOrder: 'desc',
92+
}
93+
},
94+
computed: {
95+
isLoading() {
96+
return this.$store.state.files.isLoading;
9097
},
91-
computed: {
92-
isLoading() {
93-
return this.$store.state.files.isLoading;
94-
},
95-
items() {
96-
return this.$store.state.files.items;
97-
}
98-
},
99-
mounted() {
100-
this.$store.state.files.filters.sort = `${this.sortField}_${this.sortOrder}`;
98+
items() {
99+
return this.$store.state.files.items;
100+
}
101+
},
102+
mounted() {
103+
this.$store.state.files.filters.sort = `${this.sortField}_${this.sortOrder}`;
104+
this.$store.dispatch("files/load");
105+
},
106+
methods: {
107+
onSort(field, order) {
108+
this.sortField = field;
109+
this.sortOrder = order;
110+
this.$store.state.files.filters.sort = `${field}_${order}`;
101111
this.$store.dispatch("files/load");
102112
},
103-
methods: {
104-
onSort(field, order) {
105-
this.sortField = field;
106-
this.sortOrder = order;
107-
this.$store.state.files.filters.sort = `${field}_${order}`;
108-
this.$store.dispatch("files/load");
109-
},
110-
play(file) {
111-
this.$store.commit("overlay/showPlayer", {file: file});
112-
},
113-
match(file) {
114-
this.$store.commit("overlay/showMatch", {file: file});
115-
},
116-
humanizeSeconds(seconds) {
117-
return new Date(seconds * 1000).toISOString().substr(11, 8);
118-
},
119-
removeFile(file) {
120-
this.$buefy.dialog.confirm({
121-
title: 'Remove file',
122-
message: `You're about to remove file <strong>${file.filename}</strong> from <strong>disk</strong>.`,
123-
type: 'is-danger',
124-
hasIcon: true,
125-
onConfirm: () => {
126-
ky.delete(`/api/files/file/${file.id}`).json().then(data => {
127-
this.$store.dispatch("files/load");
128-
});
129-
}
130-
});
131-
},
113+
play(file) {
114+
this.$store.commit("overlay/showPlayer", {file: file});
115+
},
116+
match(file) {
117+
this.$store.commit("overlay/showMatch", {file: file});
118+
},
119+
humanizeSeconds(seconds) {
120+
return new Date(seconds * 1000).toISOString().substr(11, 8);
121+
},
122+
removeFile(file) {
123+
this.$buefy.dialog.confirm({
124+
title: 'Remove file',
125+
message: `You're about to remove file <strong>${file.filename}</strong> from <strong>disk</strong>.`,
126+
type: 'is-danger',
127+
hasIcon: true,
128+
onConfirm: () => {
129+
ky.delete(`/api/files/file/${file.id}`).json().then(data => {
130+
this.$store.dispatch("files/load");
131+
});
132+
}
133+
});
132134
},
133-
}
135+
},
136+
}
134137
</script>
135138

136139
<style scoped>
137-
small {
138-
opacity: 0.6;
139-
}
140+
small {
141+
opacity: 0.6;
142+
}
140143
141-
.is-superlarge {
142-
height: 96px;
143-
max-height: 96px;
144-
max-width: 96px;
145-
min-height: 96px;
146-
min-width: 96px;
147-
width: 96px;
148-
}
144+
.is-superlarge {
145+
height: 96px;
146+
max-height: 96px;
147+
max-width: 96px;
148+
min-height: 96px;
149+
min-width: 96px;
150+
width: 96px;
151+
}
149152
</style>

0 commit comments

Comments
 (0)