lelo/bethaus-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
lelo 2025-03-20 20:43:31 +01:00
parent 8ea8a456c7
commit 6e2644485f
3 changed files with 55 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
static/app.css
View File

@ -13,6 +13,9 @@ body {
}
/* Header styles */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
display: flex;
align-items: center;
padding: 10px 20px;
@ -74,10 +77,15 @@ li {
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* mouse symbol for links */
li.directory-item, li.file-item,
li.directory-item a, li.file-item a {
cursor: pointer;
}
/* Directory Items (in a list) */
.directory-item {
padding: 15px;
/* Use flex for list items if needed */
}
/* Grid Layout for Directories */
@ -100,23 +108,19 @@ li {
grid-template-columns: 1fr auto;
align-items: center;
margin: 10px 0;
padding: 15px;
padding: 15px 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Link Styles */
a.directory-link,
.directory-link,
a.play-file {
color: #34495e;
text-decoration: none;
word-break: break-all;
}
a.directory-link:hover,
a.play-file:hover {
color: #34495e;
}
a.show-transcript {
text-decoration: none;
color: #34495e;

59
static/app.js
View File

@ -20,50 +20,39 @@ function renderContent(data) {
// Render breadcrumbs, directories (grid view when appropriate), and files.
let breadcrumbHTML = '';
data.breadcrumbs.forEach((crumb, index) => {
breadcrumbHTML += `<a href="#" data-path="${crumb.path}">${crumb.name}</a>`;
breadcrumbHTML += `<a href="#" class="breadcrumb-link" data-path="${crumb.path}">${crumb.name}</a>`;
if (index < data.breadcrumbs.length - 1) {
breadcrumbHTML += `<span>&gt;</span>`;
}
});
document.getElementById('breadcrumbs').innerHTML = breadcrumbHTML;
// Render directories.
// Build the HTML for directories and files.
let contentHTML = '';
if (data.directories.length > 0) {
contentHTML += '<ul>';
// Check if every directory name is short (≤15 characters)
const areAllShort = data.directories.every(dir => dir.name.length <= 15);
if (areAllShort) {
contentHTML += '<div class="directories-grid">';
data.directories.forEach(dir => {
contentHTML += `<div class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></div>`;
});
contentHTML += '</div>';
} else {
contentHTML += '<ul>';
data.directories.forEach(dir => {
contentHTML += `<li class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></li>`;
});
contentHTML += '</ul>';
}
data.directories.forEach(dir => {
contentHTML += `
<li class="directory-item">
📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a>
</li>`;
});
contentHTML += '</ul>';
}
// Render files.
if (data.files.length > 0) {
contentHTML += '<ul>';
data.files.forEach((file, idx) => {
let symbol = '📄';
if (file.file_type === 'music') {
symbol = '🔊';
// Add each music file to currentMusicFiles with its index.
currentMusicFiles.push({ path: file.path, index: idx });
} else if (file.file_type === 'image') {
symbol = '🖼️';
}
// Add a data-index attribute for music files.
const indexAttr = file.file_type === 'music' ? ` data-index="${currentMusicFiles.length - 1}"` : '';
contentHTML += `<li class="file-item">
<a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`;
<a href="#" class="play-file"${indexAttr} data-url="${file.path}" data-file-type="${file.file_type}">${symbol} ${file.name.replace('.mp3', '')}</a>`;
if (file.has_transcript) {
contentHTML += `<a href="#" class="show-transcript" data-url="${file.transcript_url}" title="Show Transcript">&#128196;</a>`;
}
@ -72,7 +61,35 @@ function renderContent(data) {
contentHTML += '</ul>';
}
// Insert the generated HTML into a container in the DOM.
document.getElementById('content').innerHTML = contentHTML;
// Now attach the event listeners for directories.
document.querySelectorAll('li.directory-item').forEach(li => {
li.addEventListener('click', function(e) {
// Only trigger if the click did not start on an <a>.
if (!e.target.closest('a')) {
const anchor = li.querySelector('a.directory-link');
if (anchor) {
anchor.click();
}
}
});
});
// Now attach the event listeners for files.
document.querySelectorAll('li.file-item').forEach(li => {
li.addEventListener('click', function(e) {
// Only trigger if the click did not start on an <a>.
if (!e.target.closest('a')) {
const anchor = li.querySelector('a.play-file');
if (anchor) {
anchor.click();
}
}
});
});
// Update global variable for gallery images (only image files).
currentGalleryImages = data.files
.filter(f => f.file_type === 'image')

8
static/audioplayer.js
View File

@ -101,7 +101,9 @@ function updateTimeInfo() {
audio.ontimeupdate = function() {
changeTimelinePosition();
updateTimeInfo();
if ('mediaSession' in navigator && typeof navigator.mediaSession.setPositionState === 'function') {
if ('mediaSession' in navigator &&
typeof navigator.mediaSession.setPositionState === 'function' &&
!isNaN(audio.duration)) {
navigator.mediaSession.setPositionState({
duration: audio.duration,
playbackRate: audio.playbackRate,
@ -112,7 +114,9 @@ audio.ontimeupdate = function() {
// --- Also update media session on play (in case timeupdate lags) ---
audio.onplay = function() {
if ('mediaSession' in navigator && typeof navigator.mediaSession.setPositionState === 'function') {
if ('mediaSession' in navigator &&
typeof navigator.mediaSession.setPositionState === 'function' &&
!isNaN(audio.duration)) {
navigator.mediaSession.setPositionState({
duration: audio.duration,
playbackRate: audio.playbackRate,