casraf/nextcloud-jukebox
1
0
Fork 0
mirror of https://github.com/chenasraf/nextcloud-jukebox.git synced 2026-05-18 01:39:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: main view

Browse Source
This commit is contained in:
Chen Asraf
2025-06-07 01:49:22 +03:00
parent 12f08ebf51
commit 71ece55ed6
9 changed files with 212 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
lib/Db/JukeboxMedia.php
View File

@@ -63,6 +63,27 @@ class JukeboxMedia extends Entity implements JsonSerializable {
protected int $mtime = 0;
protected ?string $rawId3 = null;
/**
* Returns the base64-encoded version of the album art blob
*
* @return string|null data URI like 'data:image/jpeg;base64,...' or null if no art
*/
public function getAlbumArtBase64(): ?string {
if ($this->albumArt === null) {
return null;
}
// Attempt to detect MIME type, fallback to jpeg
$mime = 'image/jpeg';
if (str_starts_with($this->albumArt, "\x89PNG")) {
$mime = 'image/png';
} elseif (str_starts_with($this->albumArt, 'GIF')) {
$mime = 'image/gif';
}
return 'data:' . $mime . ';base64,' . base64_encode($this->albumArt);
}
public function jsonSerialize(): array {
return [
'id' => $this->id,

4
lib/Migration/Version1Date20250607001010.php
View File

@@ -84,9 +84,9 @@ class Version1Date20250607001010 extends SimpleMigrationStep {
'comment' => 'Duration in seconds',
]);
$table->addColumn('album_art', 'text', [
$table->addColumn('album_art', 'blob', [
'notnull' => false,
'comment' => 'Path or encoded blob of album artwork',
'comment' => 'Raw binary image data for album art',
]);
$table->addColumn('genre', 'string', [

3
lib/Service/MusicScanner.php
View File

@@ -187,6 +187,9 @@ class MusicScanner {
$media->setYear((int)($info['tags']['id3v2']['year'][0] ?? 0));
$media->setBitrate((int)($info['audio']['bitrate'] ?? 0) / 1000);
$media->setCodec($info['audio']['dataformat'] ?? null);
if (!empty($info['comments']['picture'][0]['data'])) {
$media->setAlbumArt($info['comments']['picture'][0]['data']);
}
$rawId3 = json_encode($info);
if ($rawId3 !== false) {

3
package.json
View File

@@ -27,7 +27,8 @@
"@nextcloud/vue": "9.0.0-rc.2",
"date-fns": "^4.1.0",
"linkifyjs": "^4.3.1",
"vue": "^3.5.16"
"vue": "^3.5.16",
"vue-material-design-icons": "^5.3.1"
},
"devDependencies": {
"@eslint/js": "^9.28.0",

8
pnpm-lock.yaml generated
View File

@@ -35,6 +35,9 @@ importers:
vue:
specifier: ^3.5.16
version: 3.5.16(typescript@5.8.3)
vue-material-design-icons:
specifier: ^5.3.1
version: 5.3.1
devDependencies:
'@eslint/js':
specifier: ^9.28.0
@@ -3739,6 +3742,9 @@ packages:
peerDependencies:
eslint: '>=6.0.0'
vue-material-design-icons@5.3.1:
resolution: {integrity: sha512-6UNEyhlTzlCeT8ZeX5WbpUGFTTPSbOoTQeoASTv7X4Ylh0pe8vltj+36VMK56KM0gG8EQVoMK/Qw/6evalg8lA==}
vue-resize@2.0.0-alpha.1:
resolution: {integrity: sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==}
peerDependencies:
@@ -8069,6 +8075,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
vue-material-design-icons@5.3.1: {}
vue-resize@2.0.0-alpha.1(vue@3.5.16(typescript@5.8.3)):
dependencies:
vue: 3.5.16(typescript@5.8.3)

157
src/App.vue
View File

@@ -1,48 +1,155 @@
<template>
<NcContent app-name="jukebox"
> <NcAppNavigation
> <template #search
> <NcAppNavigationSearch v-model="searchValue" label="Search…" /> </template
> <template #list
> <NcAppNavigationItem name="Tracks" :to="{ path: '/tracks' }"
> <template #icon> <Music :size="20" /> </template> </NcAppNavigationItem
> <NcAppNavigationItem name="Albums" :to="{ path: '/albums' }"
> <template #icon> <Album :size="20" /> </template> </NcAppNavigationItem
> <NcAppNavigationItem name="Artists" :to="{ path: '/artists' }"
> <template #icon> <AccountMusic :size="20" /> </template> </NcAppNavigationItem
> <NcAppNavigationItem name="Podcasts" :to="{ path: '/podcasts' }"
> <template #icon> <Podcast :size="20" /> </template> </NcAppNavigationItem
> <NcAppNavigationItem name="Audiobooks" :to="{ path: '/audiobooks' }"
> <template #icon> <Book :size="20" /> </template> </NcAppNavigationItem
> <NcAppNavigationItem name="Videos" :to="{ path: '/videos' }"
> <template #icon> <Filmstrip :size="20" /> </template> </NcAppNavigationItem
> <NcAppNavigationItem name="Genres" :to="{ path: '/genres' }"
> <template #icon> <Tag :size="20" /> </template> </NcAppNavigationItem
> </template
> <template #footer> <!-- Add footer controls if needed --> </template> </NcAppNavigation
> <NcAppContent id="jukebox-main"
>
<div id="jukebox-router"> <router-view /> </div>
<!-- Media Player -->
<footer class="jukebox-player">
<div id="jukebox-content" class="section">
<h2>Jukebox</h2>
</div>
<div class="controls">
<NcButton
:disabled="false"
variant="tertiary"
aria-label="Previous"
size="normal"
@click="prev"
> <template #icon> <SkipPrevious :size="20" /> </template> </NcButton
> <NcButton
:disabled="false"
variant="primary"
aria-label="Play/Pause"
size="normal"
@click="togglePlay"
> <template #icon
> <Play :size="20" v-if="!isPlaying" /> <Pause :size="20" v-else /> </template
> </NcButton
> <NcButton
:disabled="false"
variant="tertiary"
aria-label="Next"
size="normal"
@click="next"
> <template #icon> <SkipNext :size="20" /> </template> </NcButton
>
</div>
<input type="range" min="0" max="100" v-model="seek" class="seekbar" />
</footer>
</NcAppContent
> </NcContent
>
</template>
<script>
<script lang="ts">
import { defineComponent } from 'vue'
import NcAppNavigation from '@nextcloud/vue/components/NcAppNavigation'
import NcAppNavigationItem from '@nextcloud/vue/components/NcAppNavigationItem'
import NcAppNavigationSearch from '@nextcloud/vue/components/NcAppNavigationSearch'
import NcAppContent from '@nextcloud/vue/components/NcAppContent'
import NcContent from '@nextcloud/vue/components/NcContent'
import NcButton from '@nextcloud/vue/components/NcButton'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import axios from '@nextcloud/axios'
import { t, n } from '@nextcloud/l10n'
import { parseISO as parseDate } from 'date-fns/parseISO'
import { format as formatDate } from 'date-fns/format'
import SkipPrevious from 'vue-material-design-icons/SkipPrevious.vue'
import SkipNext from 'vue-material-design-icons/SkipNext.vue'
import Play from 'vue-material-design-icons/Play.vue'
import Pause from 'vue-material-design-icons/Pause.vue'
import Music from 'vue-material-design-icons/Music.vue'
import Album from 'vue-material-design-icons/Album.vue'
import AccountMusic from 'vue-material-design-icons/AccountMusic.vue'
import Podcast from 'vue-material-design-icons/Podcast.vue'
import Book from 'vue-material-design-icons/Book.vue'
import Filmstrip from 'vue-material-design-icons/Filmstrip.vue'
import Tag from 'vue-material-design-icons/Tag.vue'
export default {
export default defineComponent({
name: 'App',
components: {
NcContent,
NcAppContent,
NcAppNavigation,
NcAppNavigationItem,
NcAppNavigationSearch,
NcButton,
NcTextField,
SkipPrevious,
SkipNext,
Play,
Pause,
Music,
Album,
AccountMusic,
Podcast,
Book,
Filmstrip,
Tag,
},
provide() {
return {
'NcContent:setHasAppNavigation': () => true,
}
},
data() {
return {
//
searchValue: '',
isPlaying: false,
seek: 0,
}
},
created() {
//
},
methods: {
//
togglePlay() {
this.isPlaying = !this.isPlaying
},
next() {
// Placeholder
},
prev() {
// Placeholder
},
},
computed: {
//
},
}
})
</script>
<style scoped lang="scss">
#jukebox-content {
/* */
#jukebox-main {
display: flex;
flex-direction: column;
}
#jukebox-router {
flex: 1;
}
.jukebox-player {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
border-top: 1px solid var(--color-border);
background: var(--color-background-light);
.controls {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
}
}
</style>

3
src/main.ts
View File

@@ -3,10 +3,11 @@ import './style.scss'
import { createApp } from 'vue'
import axios from '@nextcloud/axios'
import { generateOcsUrl } from '@nextcloud/router'
import router from './router'
const baseURL = generateOcsUrl('/apps/jukebox/api')
axios.defaults.baseURL = baseURL
console.log('[DEBUG] Mounting jukebox app')
console.log('[DEBUG] Base URL:', baseURL)
createApp(App).mount('#jukebox-app')
createApp(App).use(router).mount('#jukebox-app')

20
src/router/index.ts Normal file
View File

@@ -0,0 +1,20 @@
import { createRouter, createWebHashHistory, type RouteRecordRaw } from 'vue-router'
import TracksView from '../views/TracksView.vue'
const routes: RouteRecordRaw[] = [
{ path: '/', redirect: '/tracks' },
{ path: '/tracks', component: TracksView },
// { path: '/albums', component: () => import('../views/AlbumsView.vue') },
// { path: '/artists', component: () => import('../views/ArtistsView.vue') },
// { path: '/podcasts', component: () => import('../views/PodcastsView.vue') },
// { path: '/audiobooks', component: () => import('../views/AudiobooksView.vue') },
// { path: '/videos', component: () => import('../views/VideosView.vue') },
// { path: '/genres', component: () => import('../views/GenresView.vue') },
]
const router = createRouter({
history: createWebHashHistory(),
routes,
})
export default router

22
src/views/TracksView.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div>
<h3>Track List</h3>
<!-- We’ll populate this with real data later -->
</div>
</template>
<script lang="ts">
export default {
name: 'TracksView',
}
</script>
<style scoped lang="scss">
h3 {
text-align: center;
}
</style>