camera and everything
ci/woodpecker/push/woodpecker Pipeline was successful
Details
ci/woodpecker/push/woodpecker Pipeline was successful
Details
parent
4ada181f75
commit
e1e2e77f39
|
|
@ -16,6 +16,7 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"@tsconfig/svelte": "^5.0.2",
|
||||
"@types/debug": "^4.1.12",
|
||||
"@types/eslint": "8.56.0",
|
||||
"@types/lodash": "^4.14.202",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
|
|
@ -39,7 +40,8 @@
|
|||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tabler/icons-svelte": "^2.47.0",
|
||||
"@tabler/icons-webfont": "^2.47.0",
|
||||
"debug": "^4.3.4",
|
||||
"lodash": "^4.17.21",
|
||||
"normalize.css": "^8.0.1",
|
||||
"svelte": "^4.2.7",
|
||||
|
|
|
|||
|
|
@ -20,9 +20,12 @@ dependencies:
|
|||
'@sveltejs/vite-plugin-svelte':
|
||||
specifier: ^3.0.0
|
||||
version: 3.0.2(svelte@4.2.9)(vite@5.0.12)
|
||||
'@tabler/icons-svelte':
|
||||
'@tabler/icons-webfont':
|
||||
specifier: ^2.47.0
|
||||
version: 2.47.0(svelte@4.2.9)
|
||||
version: 2.47.0
|
||||
debug:
|
||||
specifier: ^4.3.4
|
||||
version: 4.3.4
|
||||
lodash:
|
||||
specifier: ^4.17.21
|
||||
version: 4.17.21
|
||||
|
|
@ -46,6 +49,9 @@ devDependencies:
|
|||
'@tsconfig/svelte':
|
||||
specifier: ^5.0.2
|
||||
version: 5.0.2
|
||||
'@types/debug':
|
||||
specifier: ^4.1.12
|
||||
version: 4.1.12
|
||||
'@types/eslint':
|
||||
specifier: 8.56.0
|
||||
version: 8.56.0
|
||||
|
|
@ -90,7 +96,7 @@ devDependencies:
|
|||
version: 3.6.3(postcss@8.4.33)(svelte@4.2.9)
|
||||
wait-on:
|
||||
specifier: ^7.2.0
|
||||
version: 7.2.0
|
||||
version: 7.2.0(debug@4.3.4)
|
||||
|
||||
packages:
|
||||
|
||||
|
|
@ -677,13 +683,10 @@ packages:
|
|||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@tabler/icons-svelte@2.47.0(svelte@4.2.9):
|
||||
resolution: {integrity: sha512-xL2NyCUUhBQv0lXylgNCpfHtMW4Ihu0hCacaYXeX+NiS1LO0geqXk/0lkrBH+u/ZLX6vyqUYNFjawjzmxthFjw==}
|
||||
peerDependencies:
|
||||
svelte: '>=3 <5'
|
||||
/@tabler/icons-webfont@2.47.0:
|
||||
resolution: {integrity: sha512-yfV9zDal0iYDmyGz4BS9IlhaaMydtLdyOrY2UAZToP65sVWj7AFIi6symNzsoBaX867xAZWVHdKcocah0BfSog==}
|
||||
dependencies:
|
||||
'@tabler/icons': 2.47.0
|
||||
svelte: 4.2.9
|
||||
dev: false
|
||||
|
||||
/@tabler/icons@2.47.0:
|
||||
|
|
@ -702,6 +705,12 @@ packages:
|
|||
resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
|
||||
dev: false
|
||||
|
||||
/@types/debug@4.1.12:
|
||||
resolution: {integrity: sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==}
|
||||
dependencies:
|
||||
'@types/ms': 0.7.34
|
||||
dev: true
|
||||
|
||||
/@types/eslint@8.56.0:
|
||||
resolution: {integrity: sha512-FlsN0p4FhuYRjIxpbdXovvHQhtlG05O1GG/RNWvdAxTboR438IOTwmrY/vLA+Xfgg06BTkP045M3vpFwTMv1dg==}
|
||||
dependencies:
|
||||
|
|
@ -720,6 +729,10 @@ packages:
|
|||
resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
|
||||
dev: true
|
||||
|
||||
/@types/ms@0.7.34:
|
||||
resolution: {integrity: sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==}
|
||||
dev: true
|
||||
|
||||
/@types/node@20.11.19:
|
||||
resolution: {integrity: sha512-7xMnVEcZFu0DikYjWOlRq7NTPETrm7teqUT2WkQjrTIkEgUyyGdWsj/Zg8bEJt5TNklzbPD1X3fqfsHw3SpapQ==}
|
||||
requiresBuild: true
|
||||
|
|
@ -963,10 +976,10 @@ packages:
|
|||
resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
|
||||
dev: true
|
||||
|
||||
/axios@1.6.7:
|
||||
/axios@1.6.7(debug@4.3.4):
|
||||
resolution: {integrity: sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==}
|
||||
dependencies:
|
||||
follow-redirects: 1.15.5
|
||||
follow-redirects: 1.15.5(debug@4.3.4)
|
||||
form-data: 4.0.0
|
||||
proxy-from-env: 1.1.0
|
||||
transitivePeerDependencies:
|
||||
|
|
@ -1634,7 +1647,7 @@ packages:
|
|||
resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==}
|
||||
dev: true
|
||||
|
||||
/follow-redirects@1.15.5:
|
||||
/follow-redirects@1.15.5(debug@4.3.4):
|
||||
resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
|
||||
engines: {node: '>=4.0'}
|
||||
peerDependencies:
|
||||
|
|
@ -1642,6 +1655,8 @@ packages:
|
|||
peerDependenciesMeta:
|
||||
debug:
|
||||
optional: true
|
||||
dependencies:
|
||||
debug: 4.3.4
|
||||
dev: true
|
||||
|
||||
/form-data@4.0.0:
|
||||
|
|
@ -2896,12 +2911,12 @@ packages:
|
|||
vite: 5.0.12
|
||||
dev: false
|
||||
|
||||
/wait-on@7.2.0:
|
||||
/wait-on@7.2.0(debug@4.3.4):
|
||||
resolution: {integrity: sha512-wCQcHkRazgjG5XoAq9jbTMLpNIjoSlZslrJ2+N9MxDsGEv1HnFoVjOCexL0ESva7Y9cu350j+DWADdk54s4AFQ==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
axios: 1.6.7
|
||||
axios: 1.6.7(debug@4.3.4)
|
||||
joi: 17.12.1
|
||||
lodash: 4.17.21
|
||||
minimist: 1.2.8
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ body, html {
|
|||
background-color: black;
|
||||
|
||||
font-family: 'B612', 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
font-size: 1.5vw;
|
||||
font-size: min(1.5vw, 1.5vh);
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -18,4 +18,24 @@ body, html {
|
|||
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
button, .button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25em;
|
||||
text-decoration: none;
|
||||
border: 1px solid white;
|
||||
cursor: pointer;
|
||||
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 0.25em;
|
||||
|
||||
background: black;
|
||||
color: white;
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script>
|
||||
import { IconSpiral } from '@tabler/icons-svelte';
|
||||
export let size = 32;
|
||||
</script>
|
||||
|
||||
<div class="spinner"><IconSpiral {size} class="spinner-icon" /></div>
|
||||
|
||||
<style>
|
||||
.spinner {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
:global(.spinner-icon) {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
import Axes from '$lib/Axes.svelte';
|
||||
import ColorGradient from '$lib/ColorGradient.svelte';
|
||||
import BrightnessGradient from '$lib/BrightnessGradient.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher<{ focus: void }>();
|
||||
|
||||
export let full = false;
|
||||
|
||||
|
|
@ -22,14 +23,9 @@
|
|||
$: circleBlocks =
|
||||
2 * Math.floor((Math.min(sizes.horizontalCount, sizes.verticalCount) * 0.66) / 2) +
|
||||
(sizes.horizontalCount % 2);
|
||||
|
||||
onMount(() => {
|
||||
window.addEventListener('dblclick', () => {
|
||||
document.body.requestFullscreen();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="test-card"
|
||||
class:full
|
||||
|
|
@ -40,6 +36,7 @@
|
|||
--column-width: {columnWidth};
|
||||
--column-height: {columnHeight};
|
||||
--left-column: {leftColumn};"
|
||||
on:dblclick={() => dispatch('focus') && document.body.requestFullscreen()}
|
||||
>
|
||||
<BackgroundGrid on:change={(ev) => (sizes = ev.detail)} subdued={!full} />
|
||||
|
||||
|
|
|
|||
|
|
@ -2,10 +2,12 @@
|
|||
import 'normalize.css/normalize.css';
|
||||
import '@fontsource/b612';
|
||||
import '@fontsource/b612/700.css';
|
||||
import '@tabler/icons-webfont/tabler-icons.css';
|
||||
import '../index.css';
|
||||
import TestCard from '$lib/TestCard.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
let idleTimeout: NodeJS.Timeout | undefined;
|
||||
onMount(() => {
|
||||
|
|
@ -21,8 +23,11 @@
|
|||
$: onlyCard = $page.url.pathname === '/card';
|
||||
</script>
|
||||
|
||||
<TestCard full={onlyCard} />
|
||||
<TestCard full={onlyCard} on:focus={() => goto('/card')} />
|
||||
<main class:content={!onlyCard}>
|
||||
{#if $page.url.pathname !== '/' && !onlyCard}
|
||||
<a href="/" class="button button-back"><i class="ti ti-arrow-back" />Back</a>
|
||||
{/if}
|
||||
<slot />
|
||||
</main>
|
||||
|
||||
|
|
@ -32,13 +37,16 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
height: 90vh;
|
||||
width: 90vw;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid white;
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
:global(.hide-idle) {
|
||||
|
|
@ -49,4 +57,16 @@
|
|||
:global(body.idle .hide-idle) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.button-back {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
|
||||
opacity: 0.66;
|
||||
transition: opacity 0.3s;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,4 @@
|
|||
<script>
|
||||
import {
|
||||
IconCamera,
|
||||
IconCpu2,
|
||||
IconDeviceGamepad,
|
||||
IconKeyboard,
|
||||
IconMicrophone,
|
||||
IconMouse,
|
||||
IconVideo,
|
||||
IconVolume
|
||||
} from '@tabler/icons-svelte';
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
|
|
@ -16,35 +6,35 @@
|
|||
|
||||
<div class="options">
|
||||
<a href="card">
|
||||
<div class="icon"><IconVideo size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-video"></i></div>
|
||||
Video
|
||||
</a>
|
||||
<a href="audio">
|
||||
<div class="icon"><IconVolume size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-volume"></i></div>
|
||||
Audio
|
||||
</a>
|
||||
<a href="keyboard">
|
||||
<div class="icon"><IconKeyboard size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-keyboard"></i></div>
|
||||
Keyboard
|
||||
</a>
|
||||
<a href="mouse">
|
||||
<div class="icon"><IconMouse size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-mouse"></i></div>
|
||||
Mouse
|
||||
</a>
|
||||
<a href="gamepad">
|
||||
<div class="icon"><IconDeviceGamepad size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-device-gamepad"></i></div>
|
||||
Gamepad
|
||||
</a>
|
||||
<a href="camera">
|
||||
<div class="icon"><IconCamera size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-camera"></i></div>
|
||||
Camera
|
||||
</a>
|
||||
<a href="microphone">
|
||||
<div class="icon"><IconMicrophone size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-microphone"></i></div>
|
||||
Microphone
|
||||
</a>
|
||||
<a href="sensors">
|
||||
<div class="icon"><IconCpu2 size={72} /></div>
|
||||
<div class="icon"><i class="ti ti-cpu-2"></i></div>
|
||||
Sensors
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -55,6 +45,7 @@
|
|||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
margin: 1rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.options {
|
||||
|
|
@ -66,5 +57,9 @@
|
|||
text-align: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
& .ti {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,257 @@
|
|||
<script lang="ts">
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import debug from 'debug';
|
||||
const dbg = debug('app:camera');
|
||||
|
||||
let video: HTMLVideoElement;
|
||||
let devices: MediaDeviceInfo[] = [];
|
||||
let currentDevice: string | undefined;
|
||||
|
||||
let requestResolution: [number, number] | 'auto' = 'auto';
|
||||
let requestFramerate: number | 'auto' = 'auto';
|
||||
let deviceInfo: {
|
||||
resolution?: string;
|
||||
frameRate?: number;
|
||||
} = {};
|
||||
let snapshot: string | undefined;
|
||||
let flipped = false;
|
||||
|
||||
$: dbg('devices %O', devices);
|
||||
$: dbg('currentDevice %s', currentDevice);
|
||||
|
||||
onMount(() => {
|
||||
refreshDevices();
|
||||
video.addEventListener('playing', () => {
|
||||
if (browser && video?.srcObject instanceof MediaStream) {
|
||||
deviceInfo = {
|
||||
resolution: `${video.videoWidth}x${video.videoHeight}`,
|
||||
frameRate: video?.srcObject?.getVideoTracks()[0]?.getSettings().frameRate
|
||||
};
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (browser && video?.srcObject instanceof MediaStream) {
|
||||
video.srcObject.getTracks().forEach((t) => t.stop());
|
||||
}
|
||||
});
|
||||
|
||||
async function refreshDevices() {
|
||||
devices = (await navigator.mediaDevices.enumerateDevices()).filter(
|
||||
(d) => d.kind === 'videoinput'
|
||||
);
|
||||
if (!currentDevice) {
|
||||
currentDevice = devices[0]?.deviceId;
|
||||
}
|
||||
}
|
||||
|
||||
$: if (currentDevice) {
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({
|
||||
video: {
|
||||
deviceId: currentDevice,
|
||||
width: requestResolution === 'auto' ? undefined : requestResolution[0],
|
||||
height: requestResolution === 'auto' ? undefined : requestResolution[1],
|
||||
frameRate: requestFramerate === 'auto' ? undefined : requestFramerate
|
||||
}
|
||||
})
|
||||
.then((stream) => {
|
||||
video.srcObject = stream;
|
||||
refreshDevices();
|
||||
});
|
||||
}
|
||||
|
||||
async function takeSnapshot() {
|
||||
const canvas = document.createElement('canvas');
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.height = video.videoHeight;
|
||||
const ctx = canvas.getContext('2d');
|
||||
if (!ctx) return;
|
||||
if (flipped) {
|
||||
ctx.scale(-1, 1);
|
||||
ctx.translate(-canvas.width, 0);
|
||||
}
|
||||
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
|
||||
snapshot = canvas.toDataURL('image/png');
|
||||
}
|
||||
</script>
|
||||
|
||||
<h2><i class="ti ti-camera"></i> Camera test</h2>
|
||||
|
||||
<div class="controls">
|
||||
<label>
|
||||
Device
|
||||
<select bind:value={currentDevice} id="device">
|
||||
{#each devices as device}
|
||||
<option value={device.deviceId}>{device.label || '???'}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<button on:click={refreshDevices}>
|
||||
<i class="ti ti-refresh"></i>
|
||||
Refresh
|
||||
</button>
|
||||
<div class="separator"></div>
|
||||
<label>
|
||||
Resolution
|
||||
<select bind:value={requestResolution}>
|
||||
<option value="auto">Auto</option>
|
||||
<option value={[4096, 2160]}>4096x2160</option>
|
||||
<option value={[3840, 2160]}>3840x2160</option>
|
||||
<option value={[1920, 1080]}>1920x1080</option>
|
||||
<option value={[1280, 720]}>1280x720</option>
|
||||
<option value={[640, 480]}>640x480</option>
|
||||
<option value={[320, 240]}>320x240</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Frame rate
|
||||
<select bind:value={requestFramerate}>
|
||||
<option value="auto">Auto</option>
|
||||
<option value={120}>120 fps</option>
|
||||
<option value={60}>60 fps</option>
|
||||
<option value={30}>30 fps</option>
|
||||
<option value={15}>15 fps</option>
|
||||
<option value={10}>10 fps</option>
|
||||
<option value={5}>5 fps</option>
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="display" class:snapshot={Boolean(snapshot)}>
|
||||
<!-- svelte-ignore a11y-media-has-caption -->
|
||||
<video class:flipped bind:this={video} autoplay class:unloaded={!currentDevice}></video>
|
||||
{#if snapshot}
|
||||
<!-- svelte-ignore a11y-missing-attribute -->
|
||||
<!--suppress HtmlRequiredAltAttribute -->
|
||||
<img src={snapshot} />
|
||||
<button on:click={() => (snapshot = undefined)}><i class="ti ti-x"></i></button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
{#if !currentDevice}
|
||||
<span class="subdued">No camera selected</span>
|
||||
{:else}
|
||||
<ul>
|
||||
{#key currentDevice}
|
||||
<li>
|
||||
Resolution: <strong>{deviceInfo.resolution || '???'}</strong>
|
||||
</li>
|
||||
<li>
|
||||
Frame rate: <strong>{deviceInfo.frameRate || '???'}</strong>
|
||||
</li>
|
||||
{/key}
|
||||
</ul>
|
||||
<div class="controls">
|
||||
<button on:click={takeSnapshot}>
|
||||
<i class="ti ti-camera"></i>
|
||||
Take picture
|
||||
</button>
|
||||
<button on:click={() => (flipped = !flipped)}>
|
||||
<i class="ti ti-flip-vertical"></i>
|
||||
{#if flipped}
|
||||
Unflip image
|
||||
{:else}
|
||||
Flip image
|
||||
{/if}
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: stretch;
|
||||
gap: 1em;
|
||||
|
||||
& label:first-child {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
background: black;
|
||||
color: white;
|
||||
padding: 0.25em 0.5em;
|
||||
border-radius: 0.25em;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.2em;
|
||||
|
||||
font-size: 0.8em;
|
||||
& select {
|
||||
font-size: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.display {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
|
||||
& img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
& button {
|
||||
position: absolute;
|
||||
top: 1em;
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
&.snapshot {
|
||||
& video {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
margin: 1em 0;
|
||||
|
||||
&.unloaded {
|
||||
background: repeating-linear-gradient(45deg, gray, gray 20px, darkgray 20px, darkgray 40px);
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
&.flipped {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.subdued {
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,8 +1,7 @@
|
|||
<script>
|
||||
import { IconArrowBack } from '@tabler/icons-svelte';
|
||||
</script>
|
||||
|
||||
<a href="/" class="hide-idle"><IconArrowBack /> Back</a>
|
||||
<a href="/" class="hide-idle"><i class="ti ti-arrow-back"></i> Back</a>
|
||||
|
||||
<style>
|
||||
a {
|
||||
|
|
|
|||
Loading…
Reference in New Issue