Merge pull request #41308 from nextcloud/artonge/feat/live_photos

Customize rendering for live photos

2 files changed, 28 insertions, 2 deletions

diff --git a/apps/files/src/components/FileEntry/FileEntryPreview.vue b/apps/files/src/components/FileEntry/FileEntryPreview.vue
index cb7cee7054b..147b25e1c9a 100644
--- 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 7ada3e705ee..010e55a87e7 100644
--- 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;
+					}
+				}
 			}
 		}