new icons for image, video and audio files
Massimo Melina committed
Jun 18, 2023 at 21:27 UTC
45497da89a8f7d36d87a586edd751bb0f5145611
6 files changed
+22
-12
dev-plugins.md
+1
-1
@@ -216,7 +216,7 @@ This is a list of available frontend-events, with respective object parameter an
216
217
The `Entry` type is an object with the following properties:
218
- `name: string` name of the entry.
219
- - `ext: string` just the extension part of the name, dot excluded.
219
+ - `ext: string` just the extension part of the name, dot excluded and lowercase.
220
- `isFolder: boolean` true if it's a folder.
221
- `n: string` name of the entry, including relative path when searched in sub-folders.
222
- `uri: string` relative url of the entry.
frontend/fontello-config.json
+2
-2
@@ -170,7 +170,7 @@
170
},
171
{
172
"uid": "381da2c2f7fd51f8de877c044d7f439d",
173
- "css": "picture",
173
+ "css": "image",
174
"code": 59409,
175
"src": "fontawesome"
176
},
@@ -200,7 +200,7 @@
200
},
201
{
202
"uid": "f9c3205df26e7778abac86183aefdc99",
203
- "css": "ccw",
203
+ "css": "reload",
204
"code": 59416,
205
"src": "fontawesome"
206
}
frontend/public/fontello.css
+1
-1
@@ -65,7 +65,7 @@
65
.fa-trash:before { content: '\e80d'; } /* '' */
66
.fa-to_start:before { content: '\e80e'; } /* '' */
67
.fa-to_end:before { content: '\e810'; } /* '' */
68
-.fa-picture:before { content: '\e811'; } /* '' */
68
+.fa-image:before { content: '\e811'; } /* '' */
69
.fa-camera:before { content: '\e812'; } /* '' */
70
.fa-search:before { content: '\e813'; } /* '' */
71
.fa-logout:before { content: '\e814'; } /* '' */
frontend/src/index.scss
+1
-1
@@ -251,7 +251,7 @@ ul.dir {
251
padding-right: 0.3em;
252
}
253
& .icon {
254
- margin-right: .3em;
254
+ margin-right: .5em;
255
vertical-align: text-bottom; // give similar aligning to <img> icons
256
}
257
&:hover {
frontend/src/show.ts
+5
-5
@@ -1,4 +1,4 @@
1
-import { DirEntry, state } from './state'
1
+import { DirEntry, ext2type, state } from './state'
2
import { createElement as h, Fragment, useRef, useState } from 'react'
3
import { hfsEvent, hIcon, newDialog, restartAnimation, WIKI_URL } from './misc'
4
import { useEventListener, useWindowSize } from 'usehooks-ts'
@@ -90,10 +90,10 @@ export function getShowType(entry: DirEntry) {
90
const res = hfsEvent('fileShow', { entry }).find(Boolean)
91
if (res)
92
return res
93
- const { n } = entry
94
- return /\.(jpe?g|gif|png|webp|svg)$/i.test(n) ? 'img'
95
- : /\.(mp3|wav|m4a)$/i.test(n) ? Audio
96
- : /\.(mp4|mpe?g|webm|mov|m4v)$/i.test(n) ? Video
93
+ const type = ext2type(entry.ext)
94
+ return type === 'audio' ? Audio
95
+ : type === 'video' ? Video
96
+ : type === 'image' ? 'img'
97
: ''
98
}
99
frontend/src/state.ts
+12
-2
@@ -98,7 +98,7 @@ export class DirEntry {
98
this.isFolder = this.n.endsWith('/')
99
if (!this.isFolder) {
100
const i = this.n.lastIndexOf('.') + 1
101
- this.ext = i ? this.n.substring(i) : ''
101
+ this.ext = i ? this.n.substring(i).toLowerCase() : ''
102
}
103
const t = this.m || this.c
104
if (t)
@@ -125,7 +125,7 @@ export class DirEntry {
125
}
126
127
getDefaultIcon() {
128
- return hIcon(this.isFolder ? 'folder' : 'file')
128
+ return hIcon(this.isFolder ? 'folder' : ext2type(this.ext) || 'file')
129
}
130
}
131
export type DirList = DirEntry[]
@@ -134,3 +134,13 @@ function pathEncode(s: string) {
134
return encodeURI(s).replace(/#/g, encodeURIComponent)
135
}
136
//unused function pathDecode(s: string) { return decodeURI(s).replace(/%23/g, '#') }
137
+
138
+const exts = {
139
+ image: ['jpeg','jpg','gif','png','webp','svg'],
140
+ audio: ['mp3','wav','m4a','ogg'],
141
+ video: ['mp4','mpeg','mpg','webm','mov','m4v'],
142
+}
143
+
144
+export function ext2type(ext: string) {
145
+ return _.findKey(exts, arr => arr.includes(ext))
146
+}