blob: 6b9886c2b967c5f864e305286c533d4afc7f6367 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
<script lang="ts">
import type {
ProductMediaItem,
MediaType,
} from '@jet-app/app-store/api/models';
import Artwork from '~/components/Artwork.svelte';
import Video from '~/components/jet/Video.svelte';
export let item: ProductMediaItem;
export let hasPortraitMedia: boolean;
export let mediaType: MediaType | undefined;
</script>
{#if item.screenshot || item.video}
<article>
<div
class="artwork-container"
class:ipad-pro-2018={mediaType === 'ipadPro_2018'}
class:ipad-11={mediaType === 'ipad_11'}
class:portrait={hasPortraitMedia}
>
{#if item.screenshot}
<Artwork
artwork={item.screenshot}
profile={hasPortraitMedia
? 'screenshot-pad-portrait'
: 'screenshot-pad'}
/>
{:else if item.video}
<Video
autoplay
video={item.video}
profile={hasPortraitMedia
? 'screenshot-pad-portrait'
: 'screenshot-pad'}
/>
{/if}
</div>
</article>
{/if}
<style>
.artwork-container,
.artwork-container :global(video) {
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
border-radius: 1.3% / 1.9%;
overflow: hidden;
/* This `transform` is required to make the `overflow: hidden` clip properly on Chrome */
transform: translateZ(0);
}
.artwork-container.portrait {
aspect-ratio: 3/4;
background: var(--systemQuaternary);
}
.artwork-container.portrait,
.artwork-container.portrait :global(video) {
border-radius: 1.9% / 1.3%;
}
.ipad-pro-2018,
.ipad-pro-2018 :global(video) {
mask-image: url('/assets/images/masks/ipad-pro-2018-mask-landscape.svg');
}
.ipad-pro-2018.portrait,
.ipad-pro-2018.portrait :global(video) {
mask-image: url('/assets/images/masks/ipad-pro-2018-mask.svg');
}
.ipad-11,
.ipad-11 :global(video) {
mask-image: url('/assets/images/masks/ipad-11-mask-landscape.svg');
}
.ipad-11.portrait,
.ipad-11.portrait :global(video) {
mask-image: url('/assets/images/masks/ipad-11-mask.svg');
}
.artwork-container :global(video):fullscreen {
mask-image: none;
border-radius: 0;
}
</style>
|
