Display play icon over live photos' previews

Signed-off-by: Louis Chemineau <louis@chmn.me>

diff --git a/apps/files/src/components/FileEntry/FileEntryPreview.vue b/apps/files/src/components/FileEntry/FileEntryPreview.vue
index cb7cee7054b055e32477c3cfb09cbb18c2bbdfa8..147b25e1c9a2d2d6015b34b090c15f83c08c27d4 100644 (file)
--- a/apps/files/src/components/FileEntry/FileEntryPreview.vue
+++ b/apps/files/src/components/FileEntry/FileEntryPreview.vue
@@ -50,6 +50,10 @@
                        :aria-label="t('files', 'Favorite')">
                        <FavoriteIcon v-once />
                </span>
+
+               <OverlayIcon :is="fileOverlay"
+                       v-if="fileOverlay"
+                       class="files-list__row-icon-overlay" />
        </span>
 </template>
 
@@ -71,9 +75,11 @@ import KeyIcon from 'vue-material-design-icons/Key.vue'
 import LinkIcon from 'vue-material-design-icons/Link.vue'
 import NetworkIcon from 'vue-material-design-icons/Network.vue'
 import TagIcon from 'vue-material-design-icons/Tag.vue'
+import PlayCircleIcon from 'vue-material-design-icons/PlayCircle.vue'
 
 import { useUserConfigStore } from '../../store/userconfig.ts'
 import FavoriteIcon from './FavoriteIcon.vue'
+import { isLivePhoto } from '../../services/LivePhotos'
 
 export default Vue.extend({
        name: 'FileEntryPreview',
@@ -163,6 +169,14 @@ export default Vue.extend({
                        }
                },
 
+               fileOverlay() {
+                       if (isLivePhoto(this.source)) {
+                               return PlayCircleIcon
+                       }
+
+                       return null
+               },
+
                folderOverlay() {
                        if (this.source.type !== FileType.Folder) {
                                return null

diff --git a/apps/files/src/components/FilesListVirtual.vue b/apps/files/src/components/FilesListVirtual.vue
index 7ada3e705ee51881fb172cb9f88a49e9ccd61035..010e55a87e7e48ef4affc7dd9dc1a336f1922905 100644 (file)
--- a/apps/files/src/components/FilesListVirtual.vue
+++ b/apps/files/src/components/FilesListVirtual.vue
@@ -510,14 +510,26 @@ export default Vue.extend({
                                right: -10px;
                        }
 
-                       // Folder overlay
+                       // File and folder overlay
                        &-overlay {
                                position: absolute;
                                max-height: calc(var(--icon-preview-size) * 0.5);
                                max-width: calc(var(--icon-preview-size) * 0.5);
-                               color: var(--color-main-background);
+                               color: var(--color-main-text);
                                // better alignment with the folder icon
                                margin-top: 2px;
+
+                               svg {
+                                       border-radius: 100%;
+
+                                       // Sow a border around the icon for better contrast
+                                       path {
+                                               stroke: var(--color-main-background);
+                                               stroke-width: 8px;
+                                               stroke-linejoin: round;
+                                               paint-order: stroke;
+                                       }
+                               }
                        }
                }
 

diff --git a/apps/files/src/services/LivePhotos.ts b/apps/files/src/services/LivePhotos.ts
index df6c9decd4acf3a2f342672b05e423f06605c9f7..ce333f31b0a3e30fa9aa75e1ea49398f3b84e1f9 100644 (file)
--- a/apps/files/src/services/LivePhotos.ts
+++ b/apps/files/src/services/LivePhotos.ts
@@ -29,5 +29,5 @@ export function initLivePhotos(): void {
  * @param {Node} node - The node
  */
 export function isLivePhoto(node: Node): boolean {
-       return node.attributes['metadata-files-live-photo'] !== null
+       return node.attributes['metadata-files-live-photo'] !== undefined
 }