diff --git a/.gitmodules b/.gitmodules index e1494c6..74a9333 100644 --- a/.gitmodules +++ b/.gitmodules @@ -13,3 +13,6 @@ [submodule "file-icons/font-awesome"] path = file-icons/font-awesome url = https://github.com/FortAwesome/Font-Awesome.git +[submodule "file-icons/bytesize-icons"] + path = file-icons/bytesize-icons + url = git@github.com:danklammer/bytesize-icons.git diff --git a/file-icons-generator.js b/file-icons-generator.js index 8a41d9e..a4252fa 100644 --- a/file-icons-generator.js +++ b/file-icons-generator.js @@ -79,7 +79,7 @@ fs.readdirSync(path.join(__dirname, "file-icons", "devopicons", "svg")).forEach( svg }; }); -// Get file icons from file-icons/devopicons +// Get file icons from file-icons/mfixx fs.readdirSync(path.join(__dirname, "file-icons", "mfixx", "svg")).forEach(icon => { if (!icon.endsWith(".svg")) return; let iconName = icon.toLowerCase().replace(".svg", "").replace("-1", ""); @@ -101,6 +101,28 @@ fs.readdirSync(path.join(__dirname, "file-icons", "mfixx", "svg")).forEach(icon svg }; }); +// Get file icons from file-icons/bytesize-icons +fs.readdirSync(path.join(__dirname, "file-icons", "bytesize-icons", "dist", "icons")).forEach(icon => { + if (!icon.endsWith(".svg")) return; + let iconName = icon.toLowerCase().replace(".svg", ""); + + let text = fs.readFileSync(path.join(__dirname, "file-icons", "bytesize-icons", "dist", "icons", icon), {encoding: "utf8"}); + + let dimensions = text.match(/viewBox="0 0 (\d+) (\d+)"/); + let width = dimensions[1]; + let height = dimensions[2]; + + let svg = text.substr(text.indexOf(">")+1); + svg = svg.replace("", ""); + + if (width === null || height === null) console.log(icon); + + fileIconsObject[iconName] = { + width, + height, + svg + }; +}); // Override with eDEX-specific icons fileIconsObject.showDisks = { width: 24, @@ -147,6 +169,7 @@ fileIconsObject.usb = { height: 24, svg: '' }; +fileIconsObject.audio = fileIconsObject.volume; // Write the file fs.writeFileSync(path.join(__dirname, "src", "assets", "icons", "file-icons.json"), JSON.stringify(fileIconsObject, "", 4)); console.log("Wrote file-icons.json"); diff --git a/file-icons/bytesize-icons b/file-icons/bytesize-icons new file mode 160000 index 0000000..210d2f8 --- /dev/null +++ b/file-icons/bytesize-icons @@ -0,0 +1 @@ +Subproject commit 210d2f81c340c838053eed4c5a0385fbf2a033e9 diff --git a/src/assets/icons/file-icons.json b/src/assets/icons/file-icons.json index 29ede87..8e24219 100644 --- a/src/assets/icons/file-icons.json +++ b/src/assets/icons/file-icons.json @@ -855,9 +855,9 @@ "svg": "" }, "github": { - "width": 512, - "height": 512, - "svg": "" + "width": "64", + "height": "64", + "svg": "\n \n" }, "gitkraken": { "width": 592, @@ -1985,9 +1985,9 @@ "svg": "" }, "twitter": { - "width": 512, - "height": 512, - "svg": "" + "width": "64", + "height": "64", + "svg": "\n \n" }, "typo3": { "width": 512, @@ -6125,9 +6125,9 @@ "svg": "" }, "tag": { - "width": 512, - "height": 512, - "svg": "" + "width": "32", + "height": "32", + "svg": "\n \n \n" }, "tailwind": { "width": 512, @@ -6415,9 +6415,9 @@ "svg": "" }, "video": { - "width": 512, - "height": 512, - "svg": "" + "width": "32", + "height": "32", + "svg": "\n \n" }, "virtualbox-alt": { "width": 512, @@ -6870,9 +6870,9 @@ "svg": "" }, "code": { - "width": 512, - "height": 512, - "svg": "" + "width": "32", + "height": "32", + "svg": "\n \n" }, "codeigniter": { "width": 427, @@ -7749,6 +7749,486 @@ "height": 512, "svg": "" }, + "activity": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "alert": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "archive": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "arrow-bottom": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "arrow-left": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "arrow-right": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "arrow-top": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "backwards": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "bag": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "ban": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "bell": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "book": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "bookmark": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "calendar": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "camera": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "caret-bottom": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "caret-left": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "caret-right": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "caret-top": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "cart": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "checkmark": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "chevron-bottom": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "chevron-left": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "chevron-right": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "chevron-top": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "clipboard": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "clock": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "close": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "compose": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "creditcard": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "desktop": { + "width": "32", + "height": "32", + "svg": "\n \n\n" + }, + "download": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "edit": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "eject": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "ellipsis-horizontal": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "ellipsis-vertical": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "end": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "export": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "external": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "eye": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "feed": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "file": { + "width": 24, + "height": 24, + "svg": "" + }, + "filter": { + "width": "32", + "height": "32", + "svg": "\n \n\n\n" + }, + "flag": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "folder-open": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "folder": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "forwards": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "fullscreen-exit": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "fullscreen": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "gift": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "heart": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "home": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "import": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "inbox": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "info": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "lightning": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "link": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "location": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "lock": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "mail": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "menu": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "message": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "microphone": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "minus": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "mobile": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "moon": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "move": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "music": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "mute": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "options": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "paperclip": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "pause": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "photo": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "play": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "plus": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "portfolio": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "print": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "reload": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "reply": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "search": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "send": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "settings": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "sign-in": { + "width": "32", + "height": "32", + "svg": "\n \n\n" + }, + "sign-out": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "star": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "start": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "telephone": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "trash": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "unlock": { + "width": "32", + "height": "32", + "svg": "\n \n \n" + }, + "upload": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "user": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "volume": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "work": { + "width": "32", + "height": "32", + "svg": "\n \n" + }, + "zoom-in": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "zoom-out": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, + "zoom-reset": { + "width": "32", + "height": "32", + "svg": "\n \n \n \n" + }, "showDisks": { "width": 24, "height": 24, @@ -7769,11 +8249,6 @@ "height": 24, "svg": "" }, - "file": { - "width": 24, - "height": 24, - "svg": "" - }, "other": { "width": 24, "height": 24, @@ -7788,5 +8263,10 @@ "width": 24, "height": 24, "svg": "" + }, + "audio": { + "width": "32", + "height": "32", + "svg": "\n \n" } } \ No newline at end of file diff --git a/src/classes/filesystem.class.js b/src/classes/filesystem.class.js index 138211e..b02847f 100644 --- a/src/classes/filesystem.class.js +++ b/src/classes/filesystem.class.js @@ -564,24 +564,24 @@ class FilesystemDisplay { let html = `
Page: /
@@ -657,8 +657,8 @@ class FilesystemDisplay {
- - ${this.icons["playArrow"].svg} + + ${this.icons["play"].svg}
@@ -668,8 +668,8 @@ class FilesystemDisplay {
00:00:00
- - ${this.icons["volumeUp"].svg} + + ${this.icons["volume"].svg}
@@ -689,8 +689,8 @@ class FilesystemDisplay {
- - ${this.icons["playArrow"].svg} + + ${this.icons["play"].svg}
@@ -700,8 +700,8 @@ class FilesystemDisplay {
00:00:00
- - ${this.icons["volumeUp"].svg} + + ${this.icons["volume"].svg}
diff --git a/src/classes/mediaPlayer.class.js b/src/classes/mediaPlayer.class.js index e8613c4..b426582 100644 --- a/src/classes/mediaPlayer.class.js +++ b/src/classes/mediaPlayer.class.js @@ -26,8 +26,8 @@ class MediaPlayer { if (media.paused || media.ended) { playpause.setAttribute("data-state", "play"); playpause.innerHTML = ` - - ${icons["playArrow"].svg} + + ${icons["play"].svg} `; } else { playpause.setAttribute("data-state", "pause"); @@ -39,9 +39,10 @@ class MediaPlayer { }; this.setFullscreenData = (state) => { + if (fullscreen === null) { return; } mediaContainer.setAttribute("data-fullscreen", !!state); fullscreen.setAttribute("data-state", !!state ? "cancel-fullscreen" : "go-fullscreen"); - const buttonIcon = !!state ? "fullscreenExit" : "fullscreen"; + const buttonIcon = !!state ? "fullscreen-exit" : "fullscreen"; fullscreen.innerHTML = ` ${icons[buttonIcon].svg} @@ -116,10 +117,7 @@ class MediaPlayer { }; this.updateVolumeIcon = (vol) => { - let icon; - if (vol > 0.6) icon = "volumeUp"; - if (vol <= 0.6) icon = "volumeDown"; - if (vol === 0) icon = "volumeMute"; + let icon = (vol > 0) ? "volume" : "mute"; volumeIcon.innerHTML = ` ${icons[icon].svg} `; @@ -144,7 +142,7 @@ class MediaPlayer { volumeIcon.addEventListener("click", () => { media.muted = !media.muted; if (media.muted) { - let icon = "volumeMute"; + let icon = "mute"; volumeIcon.innerHTML = ` ${icons[icon].svg} `;