@christianriedl/media 1.0.281 → 1.0.283

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@christianriedl/media",
-  "version": "1.0.281",
+  "version": "1.0.283",
   "description": "RIC media interfaces",
 
   "main": "dist/index.js",
@@ -18,9 +18,9 @@
   "author": "Christian Riedl",
   "license": "ISC",
   "dependencies": {
-    "@christianriedl/utils": "^1.0.168",
-    "@christianriedl/rest": "^1.0.89",
-    "@christianriedl/epg": "^1.0.43",
+    "@christianriedl/utils": "^1.0.171",
+    "@christianriedl/rest": "^1.0.90",
+    "@christianriedl/epg": "^1.0.44",
     "buffer": "^6.0.3"
   },
   "devDependencies": {

package/src/components/BookPlace.vue

@@ -58,7 +58,7 @@
 </script>
 
 <template>
-    <v-row density="compact" :class="[place.color,'place']" :style="heightStyle" >
+    <v-row density="compact" :class="[place.color,'place']" :style="heightStyle" gap="0" >
         <v-col v-if="place.vorne" cols="12" @click="selectVorne">
             <p :class="vorne" v-html="textVorne"></p>
         </v-col>
@@ -70,6 +70,9 @@
 </template>
 
 <style scoped>
+    p {
+	margin: 0;
+    }
     .place {
         border-style: solid;
         border-color: black;

package/src/components/BookSearchLine.vue

@@ -15,7 +15,7 @@
 </script>
 
 <template>
-    <v-row v-if="props.ismobile" density="compact" class="align-center" :class="classObject" @click="onSelect">
+    <v-row v-if="props.ismobile" density="compact" class="align-center" :class="classObject" @click="onSelect" gap="0">
         <v-col cols="12" >
             <p class="font-weight-bold">{{book.givenName + ' ' + book.surName}}</p>
         </v-col>
@@ -23,7 +23,7 @@
             <p>{{book.title}}</p>
         </v-col>
     </v-row>
-    <v-row v-else density="compact" class="align-center" :class="classObject" @click="onSelect" >
+    <v-row v-else density="compact" class="align-center" :class="classObject" @click="onSelect" gap="0">
         <v-col cols="4" >
             <p class="font-weight-bold">{{book.givenName + ' ' + book.surName}}</p>
         </v-col>

package/src/components/ImageZoomer.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+    import { ref, reactive, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+    const props = defineProps<{ contentW: number, contentH: number, maxScale?: number, wheelSensitivity?: number}>()
+
+    interface ZoomPanState {
+        scale: number
+        tx: number   // translateX
+        ty: number   // translateY
+    }
+
+    const containerRef = ref<HTMLElement>()
+    const imgRef = ref<HTMLImageElement>()
+    const state = reactive<ZoomPanState>({ scale: 1, tx: 0, ty: 0 })
+
+    // Damit Touch-Pan nicht mit scale=1 kollidiert
+    //const isPanning = computed(() => state.scale > 1.001)
+    const isPanning = computed(() => {
+        const fitScale = _imgW > 0 ? Math.min(_containerW / _imgW, _containerH / _imgH) : 1
+        return state.scale > fitScale + 0.001
+    })    
+    const transform = computed(() => `translate(${state.tx}px, ${state.ty}px) scale(${state.scale})`)
+    const dragging = ref(false);
+    const cursor = computed(() => {
+        if (dragging.value) return 'grabbing'
+        if (isPanning.value) return 'grab'    // scale > 1, Maus oben
+        return 'default'
+    })
+    let maxScale = props.maxScale ?? 1; // 1:1 Pixel
+    let wheelSensitivity = props.wheelSensitivity ?? 0.001;
+
+    // ── Touch (Pinch + Pan) ───────────────────────────────────────────────
+    let lastTouchDist = 0
+    let lastTouchMid = { x: 0, y: 0 }
+    let lastPan = { x: 0, y: 0 }
+
+    let _containerW = 0, _containerH = 0, _imgW = 0, _imgH = 0
+
+    // Mouse-Drag Pan (Desktop)
+    let lastMouse = { x: 0, y: 0 }
+    let _resizeTimer: ReturnType<typeof setTimeout> | null = null
+
+    // If not working : Handle Fullscreen seperately
+    function setDimensionsDebounced(cw: number, ch: number, iw: number, ih: number) {
+        if (_resizeTimer) clearTimeout(_resizeTimer)
+        _resizeTimer = setTimeout(() => {
+            _resizeTimer = null
+            console.log(`${cw}x${ch} at ${new Date().getTime()}`);
+            setDimensions(cw, ch, iw, ih)
+        }, 50)
+    }
+    onMounted(() => {
+        const ro = new ResizeObserver(([entry]) => {
+            const { width, height } = entry.contentRect
+            setDimensionsDebounced(width, height, props.contentW, props.contentH)
+        })
+        ro.observe(containerRef.value!)
+        onUnmounted(() => {
+            if (_resizeTimer) clearTimeout(_resizeTimer)
+            ro.disconnect()
+            onMouseUp();
+        })
+    });
+
+    function onMouseDown(e: MouseEvent) {
+        if (e.button !== 0) return            // nur linke Taste
+        if (!isPanning.value) return
+        dragging.value = true
+        lastMouse = { x: e.clientX, y: e.clientY }
+        window.addEventListener('mousemove', onMouseMove)
+        window.addEventListener('mouseup', onMouseUp)
+        console.log ("mousedown")
+    }
+    function onMouseMove(e: MouseEvent) {
+        if (!dragging.value) return
+        pan(e.clientX - lastMouse.x, e.clientY - lastMouse.y)
+        lastMouse.x = e.clientX;
+        lastMouse.y = e.clientY;       
+        console.log ("mousemove")
+    }
+    function onMouseUp() {
+        if (!dragging.value) return
+        console.log ("mouseup")
+        dragging.value = false
+        window.removeEventListener('mousemove', onMouseMove)
+        window.removeEventListener('mouseup', onMouseUp)
+    }
+
+    // ── Pivot-Zoom (Kern-Arithmetik) ──────────────────────────────────────
+    /*
+    function zoomAt(pivotX: number, pivotY: number, delta: number) {
+        const newScale = Math.min(maxScale, Math.max(minScale, state.scale * delta))
+        const ratio = newScale / state.scale
+
+        // Pivot bleibt fix: Punkt unter Maus/Finger darf sich nicht verschieben
+        state.tx = pivotX - (pivotX - state.tx) * ratio
+        state.ty = pivotY - (pivotY - state.ty) * ratio
+        state.scale = newScale
+
+        clampTranslate()
+    }
+    */
+    function zoomAt(pivotX: number, pivotY: number, delta: number) {
+        const fitScale = Math.min(_containerW / _imgW, _containerH / _imgH)
+        const newScale = Math.min(maxScale, Math.max(fitScale, state.scale * delta))
+        const ratio = newScale / state.scale
+
+        // Pivot von Container-Koordinaten auf center/center umrechnen
+        const px = pivotX - _containerW / 2
+        const py = pivotY - _containerH / 2
+
+        state.tx = px - (px - state.tx) * ratio
+        state.ty = py - (py - state.ty) * ratio
+        state.scale = newScale
+
+        clampTranslate()
+    }
+    // Pan
+    function pan(dx: number, dy: number) {
+        state.tx += dx
+        state.ty += dy
+        clampTranslate()
+    }
+
+    // ── Wheel ─────────────────────────────────────────────────────────────
+    function onWheel(e: WheelEvent) {
+        e.preventDefault()
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+        const pivotX = e.clientX - rect.left
+        const pivotY = e.clientY - rect.top
+        const delta = 1 - e.deltaY * wheelSensitivity
+        zoomAt(pivotX, pivotY, delta)
+    }
+
+    function getTouchMid(touches: TouchList, rect: DOMRect) {
+        const t0 = touches[0], t1 = touches[1]
+        return {
+            x: ((t0.clientX + t1.clientX) / 2) - rect.left,
+            y: ((t0.clientY + t1.clientY) / 2) - rect.top,
+        }
+    }
+
+    function getTouchDist(touches: TouchList) : number {
+        const dx = touches[0].clientX - touches[1].clientX
+        const dy = touches[0].clientY - touches[1].clientY
+        return Math.hypot(dx, dy)
+    }
+
+    function onTouchStart(e: TouchEvent) {
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+        if (e.touches.length === 2) {
+            lastTouchDist = getTouchDist(e.touches)
+            lastTouchMid  = getTouchMid(e.touches, rect)
+        } 
+        else if (e.touches.length === 1 && isPanning.value) {
+            lastPan = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+        }
+    }
+
+    function onTouchMove(e: TouchEvent) {
+        const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+
+        if (e.touches.length === 2) {
+            e.preventDefault()                          // kein Browser-Scroll
+            const dist = getTouchDist(e.touches)
+            const mid  = getTouchMid(e.touches, rect)
+            zoomAt(mid.x, mid.y, dist / lastTouchDist)  // Pinch-Zoom
+            // Gleichzeitig Pan (Mittelpunkt hat sich verschoben)
+            state.tx += mid.x - lastTouchMid.x
+            state.ty += mid.y - lastTouchMid.y
+            lastTouchDist = dist
+            lastTouchMid  = mid
+            clampTranslate()
+        } 
+        else if (e.touches.length === 1 && isPanning.value) {
+            e.preventDefault()                          // kein Carousel-Swipe
+            state.tx += e.touches[0].clientX - lastPan.x
+            state.ty += e.touches[0].clientY - lastPan.y
+            lastPan = { x: e.touches[0].clientX, y: e.touches[0].clientY }
+            clampTranslate()
+        }
+        // scale === 1 → kein preventDefault() → Carousel-Swipe funktioniert
+    }
+
+    function fitToContainer() {
+        const scaleX = _containerW / _imgW
+        const scaleY = _containerH / _imgH
+        state.scale = Math.min(scaleX, scaleY)
+        state.tx = 0   // center/center zentriert automatisch
+        state.ty = 0
+    }
+    // ── Translate begrenzen (Bild darf Container nicht verlassen) ─────────
+    /*
+    function setDimensions(cw: number, ch: number, iw: number, ih: number) {
+        _containerW = cw; _containerH = ch; _imgW = iw; _imgH = ih
+    }
+    */
+    function setDimensions(cw: number, ch: number, iw: number, ih: number) {
+        const wasInitialized = _containerW > 0
+
+        if (wasInitialized) {
+            // Bildmitte in center/center-Koordinaten — tx/ty ist bereits relativ zur Mitte
+            const cx = state.tx / state.scale
+            const cy = state.ty / state.scale
+
+            const fitScale = Math.min(_containerW / _imgW, _containerH / _imgH)
+            if (state.scale < fitScale) state.scale = fitScale
+
+            state.tx = cx * state.scale
+            state.ty = cy * state.scale
+            clampTranslate()
+        } else {
+            _containerW = cw; _containerH = ch; _imgW = iw; _imgH = ih
+            fitToContainer()
+        }
+    }
+    /*
+    function clampTranslate() {
+        const scaledW = _imgW * state.scale
+        const scaledH = _imgH * state.scale
+        const maxTx = Math.max(0, (scaledW - _containerW) / 2)
+        const maxTy = Math.max(0, (scaledH - _containerH) / 2)
+        console.log (`before scale:${state.scale} x:${state.tx} y:${state.ty}` )
+        state.tx = Math.min(maxTx, Math.max(-maxTx, state.tx))
+        state.ty = Math.min(maxTy, Math.max(-maxTy, state.ty))
+        console.log (`after  scale:${state.scale} x:${state.tx} y:${state.ty}` )
+    }
+    */
+    function clampTranslate() {
+        const scaledW = _imgW * state.scale
+        const scaledH = _imgH * state.scale
+
+        console.log (`before scale:${state.scale} x:${state.tx} y:${state.ty}` )
+        if (scaledW >= _containerW) {
+            const maxTx = (scaledW - _containerW) / 2
+            state.tx = Math.min(maxTx, Math.max(-maxTx, state.tx))
+        } else {
+            state.tx = 0   // kleiner als Container → zentriert = 0
+        }
+
+        if (scaledH >= _containerH) {
+            const maxTy = (scaledH - _containerH) / 2
+            state.ty = Math.min(maxTy, Math.max(-maxTy, state.ty))
+        } else {
+            state.ty = 0
+        }
+        console.log (`after  scale:${state.scale} x:${state.tx} y:${state.ty}` )
+    }
+</script>
+
+<template>
+  <div
+    ref="containerRef"
+    class="zoom-pan-container"
+    :style="{ cursor }"
+    @wheel.prevent="onWheel"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @mousedown="onMouseDown"
+  >
+     <!--
+    <div :style="{ transform, transformOrigin: 'center center', width: contentW + 'px', height: contentH + 'px' }">
+      <slot />
+    </div>
+     -->
+    <!-- Dieses div ist immer 100% des Containers — transformOrigin: center center stimmt -->
+    <div :style="{ transform, transformOrigin: 'center center', width: '100%', height: '100%' }">
+      <!-- Slot-Inhalt absolut zentriert -->
+      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+    .zoom-pan-container {
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+    }
+</style>

package/src/views/BooksPage.vue

@@ -434,7 +434,7 @@
             <v-btn prepend-icon="$gps" class="bg-office" @click="places">Wo</v-btn>
           </v-col>
         </v-row>
-        <v-row v-if="isMobile" density="compact" class="bg-office align-center" >
+        <v-row v-if="isMobile" density="compact" class="bg-office align-center" gap="0" >
           <v-col cols="6">
             <v-combobox v-model="selectedAuthor" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
           </v-col>
@@ -442,7 +442,7 @@
             <v-text-field v-model="currentAuthor.givenName" hide-details density="compact" @update:modelValue="fieldChanged" @update:focused="givenNameFocused"></v-text-field>
           </v-col>
         </v-row>
-        <v-row v-else density="compact" class="bg-office align-center">
+        <v-row v-else density="compact" class="bg-office align-center" gap="0">
             <v-col cols="2">
                 <v-combobox v-model="selectedAuthor" :items="authors" item-value="id" item-title="sN" hide-details density="compact" single-line @update:modelValue="authorNameChanged"></v-combobox>
             </v-col>
@@ -471,11 +471,11 @@
             </v-col>
         </v-row>
         <v-divider></v-divider>
-        <v-row v-if="isMobile" density="compact" class="bg-office align-center" >
+        <v-row v-if="isMobile" density="compact" class="bg-office align-center" gap="0" >
             <v-col cols="9">TITEL</v-col>
             <v-col cols="3">JAHR</v-col>
         </v-row>
-        <v-row v-else density="compact" class="bg-office align-center">
+        <v-row v-else density="compact" class="bg-office align-center" gap="0">
             <v-col cols="6">
                 <v-btn v-if="sortedByYear" class="bg-office" @click="sortByTitle" icon="$down"></v-btn>
                 TITEL

package/src/views/DocumentsPage.vue

@@ -217,13 +217,13 @@
     <v-card class="bg-office">
 	<v-card-title>{{path}}</v-card-title>
 	<v-container v-if="isMobile" fluid>
-	    <v-row v-for="dir in directoryNames" :key="dir">
+	    <v-row v-for="dir in directoryNames" :key="dir" density="compact" class="align-center">
 		<v-col cols="10"><p class="font-weight-medium" @click.stop="onSelect(dir)">{{dir}}</p></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$share" class="bg-office" density="compact" variant="flat" @click.stop="shareDir(dir)"></v-btn></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$delete" class="bg-office" density="compact" variant="flat" @click.stop="deleteDirOrFile(dir)"></v-btn></v-col>
 		<v-divider />
 	    </v-row>
-	    <v-row v-for="file in fileNames" :key="file" class="text-decoration-underline text-primary">
+	    <v-row v-for="file in fileNames" :key="file" density="compact" class="text-decoration-underline text-primary align-center">
 		<v-col cols="9"><p class="font-weight-medium text-decoration-underline text-primary" @click.stop="download(file)">{{file}}</p></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$send" class="bg-office" density="compact" variant="flat" @click.stop="sendFile(file)"></v-btn></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$share" class="bg-office" density="compact" variant="flat" @click.stop="shareFile(file)"></v-btn></v-col>
@@ -250,13 +250,13 @@
 		</v-col>
 	    </v-row>
 	    <file-upload v-if="uploadVisible" :isdocument="true" :directory="path" @done="uploadDone"></file-upload>
-	    <v-row v-for="dir in directoryInfos" :key="dir.name">
+	    <v-row v-for="dir in directoryInfos" :key="dir.name" density="compact" class="align-center">
 		<v-col cols="10"><p class="font-weight-medium" @click.stop="onSelect(dir.name)">{{dir.name}}<span>{{info(dir)}}</span></p></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$share" class="bg-office" density="compact" variant="flat" @click.stop="shareDir(dir.name)"></v-btn></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$delete" class="bg-office" density="compact" variant="flat" @click.stop="deleteDirOrFile(dir.name)"></v-btn></v-col>
 		<v-divider />
 	    </v-row>
-	    <v-row v-for="file in fileInfos" :key="file.name" class="text-decoration-underline text-primary">
+	    <v-row v-for="file in fileInfos" :key="file.name" density="compact" class="text-decoration-underline text-primary align-center">
 		<v-col cols="8"><p class="font-weight-medium text-decoration-underline text-primary" @click.stop="download(file.name, file.folder)">{{file.name}}<span>{{info(file)}}</span></p></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$brain" :class="vectorStoreClass(file.name)" density="compact" variant="flat" @click.stop="vectorStore(file.name)"></v-btn></v-col>
 		<v-col cols="1"><v-btn v-if="isAdmin" icon="$send" class="bg-office" density="compact" variant="flat" @click.stop="sendFile(file.name, file.folder)"></v-btn></v-col>
@@ -276,3 +276,9 @@
     </v-dialog>
 </template>
 
+<style scoped>
+    .v-row--density-compact {
+        --v-col-gap-x: 0px;
+        --v-col-gap-y: 0px;
+    }
+</style>

package/src/views/MusicPage.vue

@@ -350,10 +350,10 @@
         <v-progress-linear v-if="playingTrack" v-model="positionLength" color="blue" height="25"><strong>{{positionText}}</strong></v-progress-linear>
     </v-card>
     <file-upload v-if="uploadVisible" accept="audio/mpeg, audio/flac"></file-upload>
-    <v-card :height="listHeight" class="overflow-y-auto bg-media">
+    <v-card :height="listHeight" density="compact" class="overflow-y-auto bg-media">
         <v-list lines="two" class="bg-media">
             <v-list-item-group v-model="itemIndex">
-                <v-list-item v-for="(item,index) in items" :key="item.dlnaid" :title="item.title" :subtitle="item.subTitle"
+                <v-list-item v-for="(item,index) in items" :key="item.dlnaid" density="compact" :title="item.title" :subtitle="item.subTitle"
                              active-color="blue" :active="index == playIndex" @click="listItem(item)">
                     <template v-slot:prepend>
                         <v-avatar rounded="0" size="x-large" v-if="item.thumbnailUrl">

package/src/views/OnlineRadiosPage.vue

@@ -105,10 +105,10 @@
             </v-btn>
         </v-card-actions>
     </v-card>
-    <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
-        <v-list lines="two" class="bg-media">
+    <v-card :max-height="listHeight" density="compact" class="overflow-y-auto bg-media">
+        <v-list lines="two" density="compact" class="bg-media">
             <v-list-item-group v-model="itemIndex" color="primary">
-                <v-list-item v-for="(item,index) in items" :key="item.dlnaid" :title="item.title" 
+                <v-list-item v-for="(item,index) in items" :key="item.dlnaid" :title="item.title" density="compact" 
                              active-color="blue" :active="index == playIndex" 
                              :subtitle="item.subTitle" @click="listItem(item)">
                     <template v-slot:prepend>

package/src/views/OnlineTVsPage.vue

@@ -184,10 +184,10 @@
             </v-btn>
         </v-card-actions>
     </v-card>
-    <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
-        <v-list lines="two" class="bg-media">
+    <v-card :max-height="listHeight" density="compact" class="overflow-y-auto bg-media">
+        <v-list lines="two" density="compact" class="bg-media">
             <v-list-item-group v-model="itemIndex" color="primary">
-                <v-list-item v-for="item in items" :key="item.dlnaid" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
+                <v-list-item v-for="item in items" :key="item.dlnaid" density="compact" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
                     <template v-slot:prepend>
                         <v-avatar rounded="0" size="x-large" v-if="item.thumbnailUrl">
                             <v-img :src="item.thumbnailUrl" :cover="false"></v-img>

package/src/views/PhotoAlbumPage.vue

@@ -11,6 +11,7 @@
     import PhotoMetaData from '../components/PhotoMetaData.vue';
     import PhotoMap from '../components/PhotoMap.vue';
     import Mail from '@christianriedl/office/src/components/Mail.vue';
+    import ImageZoomer from "@christianriedl/media/src/components/ImageZoomer.vue";
 
     const router = useRouter();
     const route = useRoute();
@@ -42,9 +43,15 @@
     const showSendMail = ref(false);
     const attachment = ref("");
     const smallAttachment = ref("");
+    const showName = ref(false);
     const zoom = 14;
     let album: IMediaFolder;
+    let currentItem: IPictureFile = {} as IPictureFile;
+    let currentHeight = 0;
+    let currentWidth = 0;
     let origUrl = "";
+    let windowWidth = 0;
+    let windowHeight = 0;
     let location: string;
     let mouseDownTime: number = 0;
     let mouseTimer: number = -1;
@@ -52,15 +59,18 @@
     let nextIndex: number = -1;
     let keepBlobs: boolean = true;
     let mediaUrlLength = mediaService.mediaUrl.length;
-    const showName = ref(false);
 
     watch([appState.bodyHeight, appState.pageWidth], () => {
+     	windowHeight = window.screen.height;
+    	windowWidth = window.screen.width;
 	width.value = appState.pageWidth.value;
 	height.value = appState.bodyHeight.value;
 	landscape.value = width.value > height.value;
     }, { immediate: true });
 
     async function start(): Promise<boolean> {
+     	windowHeight = window.screen.height;
+    	windowWidth = window.screen.width;
 	window.document.addEventListener('keydown', onKey);
 	appState.navigate.value = onNavigate;
 	if (carousel.value)
@@ -97,7 +107,7 @@
 	    items.splice(0, items.length, ...list);
 	    if (route.query.start) {
 		const start = route.query.start.toString();
-		const idx = items.findIndex((item) => item.dlnaid == start);
+		const idx = items.findIndex((it) => it.dlnaid == start);
 		if (idx >= 0) {
 		    index.value = idx;
 		}
@@ -246,11 +256,10 @@
 		    showInfo.value = false;
 		}
 		else {
-		    const item = items[index.value];
-		    const folder = album ? album : mediaService.getFolder(item.dlnaParentId);
-		    origUrl = mediaService.getPhotoUrl(folder.url, item.url, '0x0x0');
-		    hasCoordinates.value = !!(item.flags & EPictureFlags.Has_Gps);
-		    headerText.value = "Metadaten - " + item.name;
+		    const folder = album ? album : mediaService.getFolder(currentItem.dlnaParentId);
+		    origUrl = mediaService.getPhotoUrl(folder.url, currentItem.url, '0x0x0');
+		    hasCoordinates.value = !!(currentItem.flags & EPictureFlags.Has_Gps);
+		    headerText.value = "Metadaten - " + currentItem.name;
 		    showInfo.value = true;
 		}
 		break;
@@ -318,11 +327,10 @@
 	showInfo.value = false;
     }
     async function onSendEmail() {
-	const item = items[index.value];
-	smallAttachment.value = getUrl(item);
-	const info = await mediaService.getMediaInfo(item.dlnaParentId, item.dlnaid);
+	smallAttachment.value = getUrl(currentItem);
+	const info = await mediaService.getMediaInfo(currentItem.dlnaParentId, currentItem.dlnaid);
 	if (!info)
-	    window.alert("Not found: " + item.url);
+	    window.alert("Not found: " + currentItem.url);
 	else {
 	    attachment.value = info.name;
 	    showSendMail.value = true;
@@ -339,26 +347,36 @@
     function onUpdate() {                       // Carousel updated
 	showInfo.value = false;
 	clearName();
-	const item = items[index.value];
+	currentItem = items[index.value];
+	if (MediaHelper.mustRotate(currentItem)) {
+	    currentWidth = currentItem.height;
+	    currentHeight = currentItem.width;		
+	}
+	else {
+	    currentWidth = currentItem.width;
+	    currentHeight = currentItem.height;		
+	}
+	const folder = album ? album : mediaService.getFolder(currentItem.dlnaParentId);
+	origUrl = mediaService.getPhotoUrl(folder.url, currentItem.url, '0x0x0');
 	if (mediaAppConfig.useImagePreload) {
-	    if (index.value != nextIndex && !item.blob) {
-		createBlob(item);
+	    if (index.value != nextIndex && !currentItem.blob) {
+		createBlob(currentItem);
 	    }
 	}
 	else {
-	    item.blob = getUrl(item);
+	    currentItem.blob = getUrl(currentItem);
 	}
 	if (playerService.currentPlayer) {
 	    const request = {
 		playerName: playerService.currentPlayer.playerName,
-		folderId: item.dlnaParentId,
-		mediaId: item.dlnaid,
+		folderId: currentItem.dlnaParentId,
+		mediaId: currentItem.dlnaid,
 		trackNo: -1,
 		withStreamTitle: false
 	    };
 	    const rc = playerService!.play(request).then(() => { });
 	}
-	nameTimer = window.setTimeout(() => { onLoad(item); }, 200);
+	nameTimer = window.setTimeout(() => { onLoad(currentItem); }, 200);
     }
     function onLoad(item: IPictureFile) {       // img loaded or cached
 	if (mediaAppConfig.useImagePreload) {
@@ -391,8 +409,11 @@
 </script>
 
 <template>
-    <v-container fluid :style="heightStyle" class="bg-grey-darken-3 pa-0">
-	<v-carousel ref="carousel" hide-delimiters :show-arrows="false" v-model="index"
+    <v-container ref="carousel" fluid :style="heightStyle" class="bg-grey-darken-3 pa-0">
+	<image-zoomer v-if="appState.fullScreen.value" :contentW="currentWidth" :contentH="currentHeight" > 
+  	    <img :src="origUrl" :width="currentWidth" :height="currentHeight" draggable="false">		
+	</image-zoomer>
+	<v-carousel v-else hide-delimiters :show-arrows="false" v-model="index"
 		    :width="width" :height="height" :cycle="cycle" :interval="interval"
 		    @click="onClick" @mousedown="onMouseDown" @update:modelValue="onUpdate">
 	    <v-carousel-item v-for="item in items" :key="item.dlnaid" :src="item.blob" :alt="item.name" :width="getWidth(item)" :height="getHeight(item)"

package/src/views/PhotosGridPage.vue

@@ -254,8 +254,8 @@
 	</v-card-actions>
     </v-card>
     <file-upload v-if="uploadVisible" accept="image/jpeg"></file-upload>
-    <v-card :height="listHeight" class="overflow-y-auto bg-media" >
-        <v-list v-if="showAlbums" class="bg-media">
+    <v-card :height="listHeight" density="compact" class="overflow-y-auto bg-media" >
+        <v-list v-if="showAlbums" density="compact" class="bg-media">
             <v-list-item v-for="item in items" :key="item.dlnaid" :title="item.info" density="compact" @click.stop="showFolder(item)">
                 <template v-slot:append>
                         <v-btn color="grey" variant="tonal" icon="$share" @click.stop.prevent="onShare(item)"></v-btn>

package/src/views/PhotosPage.vue

@@ -222,12 +222,12 @@
         </v-card-actions>
     </v-card>
     <file-upload v-if="uploadVisible" accept="image/jpeg"></file-upload>
-    <v-card :max-height="listHeight" class="overflow-y-auto bg-media" ref="scrollElement" v-scroll.self="onScroll">
-        <v-list v-if="!grouped">
+    <v-card :max-height="listHeight" class="overflow-y-auto bg-media" ref="scrollElement" density="compact" v-scroll.self="onScroll">
+        <v-list v-if="!grouped" density="compact" >
             <v-list-item v-for="item in items" :key="item.dlnaid" :title="item.info" density="compact" @click.stop="showFolder(item)">
             </v-list-item>
         </v-list>
-        <v-list v-else v-model:opened="open">
+        <v-list v-else v-model:opened="open" density="compact" >
             <v-list-group v-for="item in items" :key="item.dlnaid" :value="item.name" @click.stop="listExpand(item)">
                 <template v-slot:activator="{ props }">
                     <v-list-item v-bind="props" :title="item.info" :value="item.info" density="compact"></v-list-item>

package/src/views/RecordedVideosPage.vue

@@ -181,10 +181,10 @@
 	    </v-btn>
 	</v-card-actions>
     </v-card>
-    <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
-	<v-list lines="two" class="bg-media">
+    <v-card :max-height="listHeight" density="compact" class="overflow-y-auto bg-media">
+	<v-list lines="two" density="compact" class="bg-media">
 	    <v-list-item-group v-model="itemIndex" color="primary">
-		<v-list-item v-for="item in items" :key="item.dlnaid" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
+		<v-list-item v-for="item in items" :key="item.dlnaid" density="compact" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
 		    <template v-if="item.url" v-slot:append>
 			<v-btn :disabled="!item.description" color="grey" variant="tonal" icon="$info" @click.stop.prevent="onInfo(item)"></v-btn>
 			<v-btn color="grey" variant="tonal" icon="$share" @click.stop.prevent="onShare(item)"></v-btn>

package/src/views/VideoPage.vue

@@ -62,6 +62,8 @@
 </script>
 
 <template>
-    <video v-if="ready" ref="videoElement" controls autoplay :src="url" :width="width" :height="height" @error="onError">
-    </video>
+    <div class="bg-grey-darken-3">
+	<video v-if="ready" ref="videoElement" controls autoplay :src="url" :width="width" :height="height" @error="onError">
+	</video>
+    </div>
 </template>

package/src/views/VideosPage.vue

@@ -308,11 +308,11 @@
         </v-card-actions>
     </v-card>
     <file-upload v-if="uploadVisible" accept="video/mp4"></file-upload>
-    <v-card :max-height="listHeight" class="overflow-y-auto bg-media">
+    <v-card :max-height="listHeight" density="compact" class="overflow-y-auto bg-media">
         <v-card-subtitle v-if="testRunning">{{testText}}</v-card-subtitle>
-        <v-list lines="two" class="bg-media">
+        <v-list lines="two" density="compact" class="bg-media">
             <v-list-item-group v-model="itemIndex">
-                <v-list-item v-for="item in items" :key="item.dlnaid" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
+                <v-list-item v-for="item in items" :key="item.dlnaid" density="compact" :title="item.title" :subtitle="item.subTitle" @click="listItem(item)">
                     <template v-slot:prepend>
                         <v-avatar rounded="0" size="x-large" v-if="item.thumbnailUrl">
                             <v-img :src="item.thumbnailUrl"></v-img>