Skip to content

Commit

Permalink
SFXB add options & fix bugs
Browse files Browse the repository at this point in the history
  • Loading branch information
@0x1DEA
0x1DEA committed Dec 31, 2023
1 parent e1ab6d9 commit 9958450
Showing 1 changed file with 43 additions and 32 deletions.
75 changes: 43 additions & 32 deletions resources/js/Pages/Tools/SFX.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,9 @@ import {computed, onBeforeMount, onMounted, ref, watch} from "vue";
import Icon from "@/Components/Icon.vue";
import Lightbox from "@/Components/Lightbox.vue";
import {useMediaQuery} from "@vueuse/core";
import Dropdown from "@/Jetstream/Dropdown.vue";
import Checkbox from "@/Jetstream/Checkbox.vue";
import Label from "@/Jetstream/Label.vue";
const props = defineProps({
library: Object
Expand All @@ -21,10 +24,14 @@ const lg = useMediaQuery('(min-width: 1024px)')
watch(md, (value) => {
columns.value = value ? [0, 1] : [0]
}, {
immediate: true
})
watch(lg, (value) => {
columns.value = value ? [0, 1, 2] : [0, 1]
}, {
immediate: true
})
const panels = computed(() => {
Expand Down Expand Up @@ -63,11 +70,7 @@ const audioLoaded = ref(false);
watch(currentFile, (value) => {
const url = new URL(window.location.href);
if (value) {
url.searchParams.set('file', value);
} else {
url.searchParams.delete('file');
}
value ? url.searchParams.set('file', value) : url.searchParams.delete('file');
window.history.replaceState(null, '', url.toString());
if (audio.value && value) {
Expand Down Expand Up @@ -116,24 +119,7 @@ watch(path, (value) => {
onBeforeMount(() => {
const params = new URLSearchParams(window.location.search);
let _path = params.get('path');
let file = params.get('file');
if (_path) {
_path = _path.split('/')
_path.unshift(); // Might not be needed
// while (_path.join('/') !== path.value.join()) {
//
// }
let last = _path[_path.length - 1];
for (let folder in props.library.folders) {
if (props.library.folders[folder].name === last) {
console.log(3)
selectFolder(folder);
}
}
}
if (file && props.library.files.hasOwnProperty(file)) {
file = file|0;
currentFile.value = file;
Expand All @@ -147,10 +133,15 @@ onMounted(() => {
audio.value.src = `https://geometrydashfiles.b-cdn.net/sfx/s${currentFile.value}.ogg`;
}
})
const options = ref({
pruneResults: false,
instantPlay: true,
});
</script>
<template>
<app-layout title="SFX Browser">
<audio @timeupdate="e => audioProgress = e.target.currentTime" @canplay="audioLoaded = true;" ref="audio" class="hidden"></audio>
<audio @timeupdate="e => audioProgress = e.target.currentTime" @canplay="audioLoaded = true;audio.play()" ref="audio" class="hidden"></audio>
<div class="y rounded-lg border border-ui-700 w-full bg-ui-900">
<div class="flex flex-col md:flex-row items-center justify-between space-y-2 md:space-y-0 md:space-x-2 p-2 rounded-t-lg">
<div class="x space-x-2">
Expand All @@ -165,7 +156,7 @@ onMounted(() => {
</div>
</div>
<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2 grow w-full">
<div @click="pathFocus = true; pathInput.focus()" class="x items-center grow rounded-md bg-ui-950 text-sm px-1 py-1 w-full">
<div @click="pathFocus = true; pathInput.focus()" class="x flex-wrap gap-1 items-center grow rounded-md bg-ui-950 text-sm px-1 py-1 w-full">
<button @click="path = [1]" class="rounded px-1 hover:bg-ui-900">Root</button>
<template v-for="(bit, key) in path.slice(1, path.length)">
<button class="rounded py-0.5 px-1 hover:bg-ui-900">
Expand All @@ -190,6 +181,26 @@ onMounted(() => {
<Icon class="w-4" name="funnel" type="solid" size="20"/>
<Icon class="w-4" name="chevron-down" type="solid" size="20"/>
</div>
<Dropdown>
<template #trigger>
<div class="x space-x-1 items-center border border-ui-700 rounded bg-ui-800 shadow text-sm p-1">
<Icon class="w-4" name="cog-6-tooth" type="solid" size="20"/>
<Icon class="w-4" name="chevron-down" type="solid" size="20"/>
</div>
</template>
<template #content>
<div @click.stop class="y space-y-2 p-2">
<Label>
<Checkbox v-model="options.instantPlay" :checked="options.instantPlay" class="mr-1"/>
Play Sound on Selection
</Label>
<Label>
<Checkbox v-model="options.pruneResults" :checked="options.pruneResults" class="mr-1"/>
Remove search results instead of dimming
</Label>
</div>
</template>
</Dropdown>
<Lightbox>
<span class="border border-ui-700 rounded bg-ui-800 shadow text-sm px-1 py-0.5">Credits</span>
<template #content>
Expand All @@ -213,7 +224,7 @@ onMounted(() => {
</div>
<div class="gap-0 grid grow" :style="`grid-template-columns: repeat(${columns.length}, minmax(0, 1fr));`">
<div v-for="i in columns" class="y bg-ui-950 border-t border-ui-700 first:rounded-bl-lg last:rounded-br-lg h-[calc(100vh-19rem)] overflow-y-auto">
<div class="y justify-center relative" :class="{'border-l border-ui-700': columns.length === 2}" v-if="i === columns.length - 1">
<div class="y sticky top-0 bg-ui-950 z-10 justify-center relative" :class="{'border-l border-ui-700': columns.length === 2}" v-if="i === columns.length - 1">
<div class="y items-center space-y-4 p-8" :class="{'invisible': !currentFile}">
<div class="rounded-full bg-ui-800 p-8">
<Icon class="w-16" name="speaker-wave" type="solid" size="24"/>
Expand Down Expand Up @@ -246,23 +257,23 @@ onMounted(() => {
<div class="border-t border-ui-700 bg-ui-900 w-full"></div>
</div>
<div class="y" :class="{'border-x border-ui-700': i === 1}">
<div v-for="(file, id) in panels[i].folders" @click="selectFolder(id|0)" class="x px-2 py-0.5 items-center justify-between cursor-pointer" :class="{'bg-blue-600 text-white': path.includes(id|0), 'text-ui-600 [&>*:nth-child(even)]:hidden cursor-normal': (searchQuery !== '' && !highlightedFolders.includes(id|0))}">
<div v-for="(folder, id) in panels[i].folders" @click="selectFolder(id|0)" class="x px-2 py-0.5 items-center justify-between cursor-pointer" :class="{'bg-blue-600 text-white': path.includes(id|0), 'text-ui-600 [&>*:nth-child(even)]:hidden cursor-normal': (searchQuery !== '' && !highlightedFolders.includes(id|0)), '!hidden': (searchQuery !== '' && !highlightedFolders.includes(id|0) && options.pruneResults)}">
<div class="x items-center space-x-2">
<Icon v-if="path.includes(id|0)" class="w-4" name="folder-open" type="solid" size="20"/>
<Icon v-else class="w-4" name="folder" type="solid" size="20"/>
<span class="text-sm">{{ file.name }}</span>
<span class="text-sm">{{ folder.name }}</span>
</div>
<Icon class="w-4" name="chevron-right" type="solid" size="20"/>
</div>
</div>
<div v-if="Object.keys(panels[i].folders).length > 0 && Object.keys(panels[i].files).length > 0" class="border-t border-ui-700 bg-ui-900"></div>
<div class="y grow border-ui-700" :class="{'border-x': i === 1, 'border-r-0': columns.length === 2}">
<div v-for="(song, id) in panels[i].files" class="y cursor-pointer text-sm px-2 py-1" @click="currentFile = id|0" :class="{'bg-blue-600 text-white': (id|0) === currentFile}">
<div class="x items-center justify-between" :class="{'text-ui-600': searchQuery !== '' && !searchResults.includes(id|0)}">
<span>{{ song.name }}</span>
<span>{{ (song.milliseconds / 100).toFixed(2) }}s</span>
<div v-for="(file, id) in panels[i].files" class="y cursor-pointer text-sm px-2 py-1" @click="currentFile = id|0" :class="{'bg-blue-600 text-white': (id|0) === currentFile, '!hidden': searchQuery !== '' && !searchResults.includes(id|0) /*&& (id|0) !== currentFile*/ && options.pruneResults}">
<div class="x items-center justify-between" :class="{'text-ui-600': searchQuery !== '' && !searchResults.includes(id|0) && (id|0) !== currentFile}">
<span>{{ file.name }}</span>
<span>{{ (file.milliseconds / 100).toFixed(2) }}s</span>
</div>
<span class="text-sm font-mono text-ui-600" :class="{'!text-white': (id|0) === currentFile}"><Tooltip class="inline-flex" :message="song.bytes" position="left">{{ prettyBytes(song.bytes) }}</Tooltip> &bull; ID: {{ id }}</span>
<span class="text-sm font-mono text-ui-600" :class="{'!text-white': (id|0) === currentFile}"><Tooltip class="inline-flex" :message="file.bytes" position="left">{{ prettyBytes(file.bytes) }}</Tooltip> &bull; ID: {{ id }}</span>
</div>
</div>
</div>
Expand Down

0 comments on commit 9958450

Please sign in to comment.