Add 'conditional media' main item

.gitignore

@@ -11,3 +11,5 @@ vite.config.ts.timestamp-*
 .vscode
 src/routes/playground
 src/lib/Playground
+/data/configuration.yaml
+/data/youtube_credentials.json

src/lib/Components/ComputeIcon.svelte

@@ -6,6 +6,7 @@
 
 	export let entity_id: string;
 	export let getIconString: boolean | undefined = undefined;
+	export let skipEntitiyPicture: boolean | undefined = undefined;
 
 	let stateObj: any;
 	let currentIcon: string | undefined;
@@ -501,7 +502,7 @@
 		const entity = $states[entity_id];
 		const domain = getDomain(entity?.entity_id || entity_id);
 
-		if (entity?.attributes?.entity_picture && domain !== 'update') {
+		if (entity?.attributes?.entity_picture && !skipEntitiyPicture && domain !== 'update') {
 			return 'entity_picture';
 		} else if (entity?.attributes?.icon && String(entity.attributes.icon).startsWith('mdi')) {
 			return entity.attributes.icon.toString();

src/lib/Components/Progress.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { tweened } from 'svelte/motion';
+
+	export let duration: number;
+	export let size: number;
+	export let stroke: number;
+
+	const progress = tweened(0);
+
+	const attributes = {
+		cx: size / 2,
+		cy: size / 2,
+		r: (size - stroke * 2) / 2,
+		fill: 'none',
+		'stroke-width': stroke,
+		'vector-effect': 'non-scaling-stroke'
+	};
+
+	const circumference = 2 * Math.PI * attributes.r;
+
+	onMount(() => {
+		progress.set(100, { duration });
+	});
+
+	onDestroy(() => {
+		progress.set(0, { duration: 0 });
+	});
+</script>
+
+<svg width={size} height={size} style:transform="rotate(-90deg)">
+	<circle stroke="rgba(0, 0, 0, 0.35)" {...attributes} />
+	<circle
+		stroke="rgb(255, 255, 255, 1)"
+		stroke-dashoffset={circumference * (1 - $progress / 100)}
+		stroke-dasharray={circumference}
+		{...attributes}
+	/>
+</svg>