Skip to content

Commit

Permalink
ran formatter
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordan-rash
jordan-rash committed Mar 13, 2024
1 parent 9e74380 commit b4df1bc
Show file tree
Hide file tree
Showing 13 changed files with 525 additions and 284 deletions.
2 changes: 0 additions & 2 deletions natster-io/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ import AuthView from './views/AuthView.vue'
import { catalogStore } from './stores/catalog'
const { activeDownload } = storeToRefs(catalogStore())
import { VueSpinnerAudio, VueSpinnerTail } from 'vue3-spinners'
const { isAuthenticated, isLoading } = useAuth0()
</script>

<style>
Expand Down
68 changes: 43 additions & 25 deletions natster-io/src/components/Avatar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,53 @@
<MenuButton class="flex items-center no-underline focus:outline-none">
<span class="relative inline-block">
<img class="h-12 w-12 rounded-md" :src="userPhotoUrl" alt="" />
<span :class="[
getCatalogOnline ? 'bg-green-600 text-white' : 'bg-gray-200 text-black',
'absolute right-0 top-0 block h-4 w-4 -translate-y-1/2 translate-x-1/2 transform rounded-full text-center text-xs align-top text-black ring-1 ring-white'
]">
<span
:class="[
getCatalogOnline ? 'bg-green-600 text-white' : 'bg-gray-200 text-black',
'absolute right-0 top-0 block h-4 w-4 -translate-y-1/2 translate-x-1/2 transform rounded-full text-center text-xs align-top text-black ring-1 ring-white'
]"
>
{{ pending_imports == 0 ? '' : pending_imports }}
</span>
</span>
</MenuButton>
</div>

<transition enter-active-class="transition ease-out duration-100" enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100" leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100" leave-to-class="transform opacity-0 scale-95">
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems
class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none bottom-full">
class="absolute right-0 z-10 mt-2 w-56 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none bottom-full"
>
<div class="py-1">
<MenuItem v-slot="{ active }">
<a href="https://docs.natster.io"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'block px-4 py-2 text-sm']">Docs</a>
<a
href="https://docs.natster.io"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block px-4 py-2 text-sm'
]"
>Docs</a
>
</MenuItem>
</div>
<div class="py-1">
<MenuItem v-slot="{ active }">
<button type="submit" @click.prevent="signout" :class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block w-full px-4 py-2 text-left text-sm'
]">
Sign out
</button>
<button
type="submit"
@click.prevent="signout"
:class="[
active ? 'bg-gray-100 text-gray-900' : 'text-gray-700',
'block w-full px-4 py-2 text-left text-sm'
]"
>
Sign out
</button>
</MenuItem>
</div>
</MenuItems>
Expand Down Expand Up @@ -81,16 +99,16 @@ const props = defineProps({
natster_account: String
})
watch(() => uStore.getCatalogOnline, (newVal) => {
if (newVal) {
notificationStore().setNotification('Catalog Online', 'Your catalog has come online')
} else {
notificationStore().setNotification(
'Catalog Offline',
'Your catalog has gone offline'
)
watch(
() => uStore.getCatalogOnline,
(newVal) => {
if (newVal) {
notificationStore().setNotification('Catalog Online', 'Your catalog has come online')
} else {
notificationStore().setNotification('Catalog Offline', 'Your catalog has gone offline')
}
}
})
)
function copyAccountIdToClipboard() {
navigator.clipboard.writeText(props.natster_account)
Expand Down
22 changes: 14 additions & 8 deletions natster-io/src/components/Catalogs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,23 @@
<ul v-if="catalogsInitialized" role="list" class="-mx-2 mt-2 space-y-1">
<li v-for="(catalog, i) in getImportedCatalogs" :key="i">
<div class="w-full">
<button @click="cStore.setCatalogSelected(catalog)" :disabled="!catalog.online" :class="[
catalog.selected
? 'enabled:bg-gray-800 enabled:text-white '
: 'enabled:text-gray-400 enabled:hover:text-white enabled:hover:bg-gray-800',
'group w-full flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold disabled:text-gray-500'
]">
<button
@click="cStore.setCatalogSelected(catalog)"
:disabled="!catalog.online"
:class="[
catalog.selected
? 'enabled:bg-gray-800 enabled:text-white '
: 'enabled:text-gray-400 enabled:hover:text-white enabled:hover:bg-gray-800',
'group w-full flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold disabled:text-gray-500'
]"
>
<span
class="relative inline-block flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400">
class="relative inline-block flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-gray-700 bg-gray-800 text-[0.625rem] font-medium text-gray-400"
>
<span
class="absolute right-0 top-0 block h-1.5 w-1.5 -translate-y-1/2 translate-x-1/2 transform rounded-full ring-1 ring-white"
:class="[catalog.online ? 'bg-green-500' : 'bg-gray-500']" />
:class="[catalog.online ? 'bg-green-500' : 'bg-gray-500']"
/>
<span class=""> {{ catalog.name.substring(0, 1).toUpperCase() }} </span>
</span>
<span class="truncate">{{ catalog.name }} </span>
Expand Down
82 changes: 55 additions & 27 deletions natster-io/src/components/File.vue
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,49 @@
<template>
<TransitionRoot as="template" :show="show">
<Dialog as="div" class="relative z-10" @close="close()">
<TransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0"
enter-to="opacity-100"
leave="ease-in duration-200"
leave-from="opacity-100"
leave-to="opacity-0"
>
<div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</TransitionChild>

<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<TransitionChild as="template" enter="ease-out duration-300"
<div
class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
>
<TransitionChild
as="template"
enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
enter-to="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<DialogPanel
class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
class="relative transform overflow-hidden rounded-lg bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
>
<div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
<button type="button"
<button
type="button"
class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
@click="close()">
@click="close()"
>
<span class="sr-only">Close</span>
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
<DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
{{ catalog.name }} | {{ title }}</DialogTitle>
{{ catalog.name }} | {{ title }}</DialogTitle
>
<div class="mt-2">
<p v-if="!!body" class="text-sm text-gray-500">
{{ body }}
Expand All @@ -46,36 +63,47 @@
width="640"
height="360"
autoplay
controls>
</video>
controls
></video>

<AudioPlayer
:option="getAudioOptions(mediaUrl, description == '' ? title : description, catalog.image)"
:option="
getAudioOptions(
mediaUrl,
description == '' ? title : description,
catalog.image
)
"
v-else-if="!!mediaUrl && mimeType && mimeType.toLowerCase() == 'audio/mpeg'"
v-show="!loading"
@loadedmetadata="playAudio(e)"
:title="title"
/>

<img
v-else-if="blob != null && mimeType && mimeType.toLowerCase().indexOf('image/') === 0"
v-else-if="
blob != null && mimeType && mimeType.toLowerCase().indexOf('image/') === 0
"
:src="blobData"
v-show="!loading"
:alt="title"
/>

<p
v-else-if="blob != null && mimeType && mimeType.toLowerCase() === 'text/plain'"
v-show="!loading">
{{ blobData }}
v-show="!loading"
>
{{ blobData }}
</p>

<p v-else v-show="!loading">Error displaying media</p>
</div>
<div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="button"
<button
type="button"
class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
@click="close()">
@click="close()"
>
Close
</button>
</div>
Expand All @@ -98,7 +126,8 @@ import AudioPlayer from 'vue3-audio-player'
import 'vue3-audio-player/dist/style.css'
import { fileStore } from '../stores/file'
const fStore = fileStore()
const { body, title, show, loading, mimeType, mediaUrl, catalog, description, blob } = storeToRefs(fStore)
const { body, title, show, loading, mimeType, mediaUrl, catalog, description, blob } =
storeToRefs(fStore)
const blobData = ref(null)
Expand All @@ -112,13 +141,12 @@ watch(blob, async (newVal, oldVal) => {
console.log('blob changed', newVal, mimeType.value)
if (newVal != null && mimeType.value.toLowerCase().indexOf('image/') === 0) {
var urlCreator = window.URL || window.webkitURL;
blobData.value = urlCreator.createObjectURL(newVal);
var urlCreator = window.URL || window.webkitURL
blobData.value = urlCreator.createObjectURL(newVal)
} else if (newVal != null && mimeType.value == 'text/plain') {
await newVal.text()
.then((text) => {
blobData.value = text
})
await newVal.text().then((text) => {
blobData.value = text
})
} else {
blobData.value = null
}
Expand Down Expand Up @@ -154,15 +182,15 @@ watch(mediaUrl, (newVal, oldVal) => {
fStore.loading = false
}
})
} catch (e) { }
} catch (e) {}
try {
document.querySelector('video').addEventListener('play', (event) => {
if (fStore.loading) {
fStore.loading = false
}
})
} catch (e) { }
} catch (e) {}
}, 50)
}
})
Expand Down
Loading

0 comments on commit b4df1bc

Please sign in to comment.