diff options
Diffstat (limited to 'src/components/jet/item/ProductMedia')
6 files changed, 384 insertions, 0 deletions
diff --git a/src/components/jet/item/ProductMedia/ProductMediaMacItem.svelte b/src/components/jet/item/ProductMedia/ProductMediaMacItem.svelte new file mode 100644 index 0000000..516ed32 --- /dev/null +++ b/src/components/jet/item/ProductMedia/ProductMediaMacItem.svelte @@ -0,0 +1,31 @@ +<script lang="ts"> + import type { ProductMediaItem } from '@jet-app/app-store/api/models'; + import Artwork from '~/components/Artwork.svelte'; + import Video from '~/components/jet/Video.svelte'; + + export let item: ProductMediaItem; +</script> + +{#if item.screenshot} + <article> + <Artwork artwork={item.screenshot} profile="screenshot-mac" /> + </article> +{:else if item.video} + <article> + <Video autoplay video={item.video} profile="screenshot-mac" /> + </article> +{/if} + +<style> + article { + overflow: hidden; + } + + article :global(.video) { + aspect-ratio: 16/10; + } + + article :global(video) { + object-fit: cover; + } +</style> diff --git a/src/components/jet/item/ProductMedia/ProductMediaPadItem.svelte b/src/components/jet/item/ProductMedia/ProductMediaPadItem.svelte new file mode 100644 index 0000000..6b9886c --- /dev/null +++ b/src/components/jet/item/ProductMedia/ProductMediaPadItem.svelte @@ -0,0 +1,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> diff --git a/src/components/jet/item/ProductMedia/ProductMediaPhoneItem.svelte b/src/components/jet/item/ProductMedia/ProductMediaPhoneItem.svelte new file mode 100644 index 0000000..255b663 --- /dev/null +++ b/src/components/jet/item/ProductMedia/ProductMediaPhoneItem.svelte @@ -0,0 +1,142 @@ +<script lang="ts"> + import type { + ProductMediaItem, + MediaType, + } from '@jet-app/app-store/api/models'; + import { getAspectRatio } from '@amp/web-app-components/src/components/Artwork/utils/artProfile'; + import Artwork from '~/components/Artwork.svelte'; + import Video from '~/components/jet/Video.svelte'; + import type { NamedProfile } from '~/config/components/artwork'; + + export let item: ProductMediaItem; + export let hasPortraitMedia: boolean; + export let mediaType: MediaType | undefined; + + const getArtworkProfile = ( + mediaType: MediaType | undefined, + hasPortraitMedia: boolean, + ): NamedProfile => { + const suffix = hasPortraitMedia ? '_portrait' : ''; + + // Map specific media types to their artwork profile names + const mediaTypeProfiles: Record<string, string> = { + iphone_6_5: 'screenshot-iphone_6_5', + iphone_5_8: 'screenshot-iphone_5_8', + iphone_d74: 'screenshot-iphone_d74', + }; + + const baseProfile = + mediaType && mediaTypeProfiles[mediaType] + ? mediaTypeProfiles[mediaType] + : 'screenshot-phone'; + + return `${baseProfile}${suffix}` as NamedProfile; + }; + + $: isLandscapeScreenshot = + item.screenshot && item.screenshot.width > item.screenshot.height; + $: profile = getArtworkProfile(mediaType, !isLandscapeScreenshot); + $: restOfShelfAspectRatio = getAspectRatio( + getArtworkProfile(mediaType, hasPortraitMedia), + ); +</script> + +{#if item.screenshot || item.video} + <article + class:with-rotated-artwork={isLandscapeScreenshot && hasPortraitMedia} + style:--aspect-ratio={`${restOfShelfAspectRatio}`} + > + <div + class="artwork-container" + class:iphone-6-5={mediaType === 'iphone_6_5'} + class:iphone-5-8={mediaType === 'iphone_5_8'} + class:iphone-d74={mediaType === 'iphone_d74'} + class:portrait={hasPortraitMedia} + > + {#if item.screenshot} + <Artwork + {profile} + artwork={item.screenshot} + disableAutoCenter={true} + withoutBorder={true} + /> + {:else if item.video} + <Video autoplay video={item.video} {profile} /> + {/if} + </div> + </article> +{/if} + +<style> + article.with-rotated-artwork { + position: relative; + aspect-ratio: var(--aspect-ratio); + } + + /* + * For iPhone screenshots that are landscape, but in a shelf/list with portrait screenshots, + * as denoted by `hasPortraitMedia`, we rotate the landscape screenshot to be in the portrait + * orientation, and scale it up so it fills the container. + */ + article.with-rotated-artwork .artwork-container { + position: absolute; + top: 50%; + left: 50%; + height: auto; + width: calc((1 / var(--aspect-ratio)) * 100%); + transform: translate(-50%, -50%) rotate(-90deg); + transform-origin: center; + } + + .artwork-container, + .artwork-container :global(video) { + mask-position: center; + mask-repeat: no-repeat; + mask-size: 100%; + border-radius: 20px; + overflow: hidden; + + /* This `transform` is required to make the `overflow: hidden` clip properly on Chrome */ + transform: translateZ(0); + } + + .iphone-5-8, + .iphone-5-8 :global(video) { + /* need to confirm with design for correct value */ + border-radius: 23px; + mask-image: url('/assets/images/masks/iphone-5-8-mask-landscape.svg'); + } + + .iphone-5-8.portrait, + .iphone-5-8.portrait :global(video) { + mask-image: url('/assets/images/masks/iphone-5-8-mask.svg'); + } + + .iphone-6-5, + .iphone-6-5 :global(video) { + /* need to confirm with design for correct value */ + border-radius: 21px; + mask-image: url('/assets/images/masks/iphone-6-5-mask-landscape.svg'); + } + + .iphone-6-5.portrait, + .iphone-6-5.portrait :global(video) { + mask-image: url('/assets/images/masks/iphone-6-5-mask.svg'); + } + + .iphone-d74, + .iphone-d74 :global(video) { + border-radius: 5.7% / 12.8%; + } + + .iphone-d74.portrait, + .iphone-d74.portrait :global(video) { + border-radius: 12.8% / 5.7%; + } + + .artwork-container :global(video):fullscreen { + mask-image: none; + border-radius: 0; + object-fit: contain; + } +</style> diff --git a/src/components/jet/item/ProductMedia/ProductMediaTVItem.svelte b/src/components/jet/item/ProductMedia/ProductMediaTVItem.svelte new file mode 100644 index 0000000..7f7fd7a --- /dev/null +++ b/src/components/jet/item/ProductMedia/ProductMediaTVItem.svelte @@ -0,0 +1,34 @@ +<script lang="ts"> + import type { ProductMediaItem } from '@jet-app/app-store/api/models'; + import Artwork from '~/components/Artwork.svelte'; + import Video from '~/components/jet/Video.svelte'; + + export let item: ProductMediaItem; +</script> + +{#if item.screenshot || item.video} + <article> + <div class="artwork-container"> + {#if item.screenshot} + <Artwork artwork={item.screenshot} profile="screenshot-tv" /> + {:else if item.video} + <Video autoplay video={item.video} profile="screenshot-tv" /> + {/if} + </div> + </article> +{/if} + +<style> + .artwork-container, + .artwork-container :global(video) { + 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 :global(video):fullscreen { + border-radius: 0; + } +</style> diff --git a/src/components/jet/item/ProductMedia/ProductMediaVisionItem.svelte b/src/components/jet/item/ProductMedia/ProductMediaVisionItem.svelte new file mode 100644 index 0000000..e893dd6 --- /dev/null +++ b/src/components/jet/item/ProductMedia/ProductMediaVisionItem.svelte @@ -0,0 +1,38 @@ +<script lang="ts"> + import type { ProductMediaItem } from '@jet-app/app-store/api/models'; + import Artwork from '~/components/Artwork.svelte'; + import Video from '~/components/jet/Video.svelte'; + + export let item: ProductMediaItem; +</script> + +{#if item.screenshot || item.video} + <article> + <div class="artwork-container"> + {#if item.screenshot} + <Artwork + artwork={item.screenshot} + profile="screenshot-vision" + /> + {:else if item.video} + <Video + autoplay + video={item.video} + profile="screenshot-vision" + /> + {/if} + </div> + </article> +{/if} + +<style> + .artwork-container, + .artwork-container :global(video) { + border-radius: 20px; + overflow: hidden; + } + + .artwork-container :global(video):fullscreen { + border-radius: 0; + } +</style> diff --git a/src/components/jet/item/ProductMedia/ProductMediaWatchItem.svelte b/src/components/jet/item/ProductMedia/ProductMediaWatchItem.svelte new file mode 100644 index 0000000..0a4b50e --- /dev/null +++ b/src/components/jet/item/ProductMedia/ProductMediaWatchItem.svelte @@ -0,0 +1,50 @@ +<script lang="ts"> + import type { + ProductMediaItem, + MediaType, + } from '@jet-app/app-store/api/models'; + import Artwork from '~/components/Artwork.svelte'; + + export let item: ProductMediaItem; + export let mediaType: MediaType | undefined; +</script> + +{#if item.screenshot} + <article> + <div + class="artwork-container" + class:apple-watch-2018={mediaType === 'appleWatch_2018'} + class:apple-watch-2021={mediaType === 'appleWatch_2021'} + class:apple-watch-2022={mediaType === 'appleWatch_2022'} + class:apple-watch-2024={mediaType === 'appleWatch_2024'} + > + <Artwork artwork={item.screenshot} profile="screenshot-watch" /> + </div> + </article> +{/if} + +<style> + .artwork-container { + mask-position: center; + mask-size: contain; + mask-repeat: no-repeat; + border-radius: 12px; + overflow: hidden; + } + + .apple-watch-2018 { + mask-image: url('/assets/images/masks/apple-watch-2018-mask.svg'); + } + + .apple-watch-2021 { + mask-image: url('/assets/images/masks/apple-watch-2021-mask.svg'); + } + + .apple-watch-2022 { + mask-image: url('/assets/images/masks/apple-watch-2022-mask.svg'); + } + + .apple-watch-2024 { + mask-image: url('/assets/images/masks/apple-watch-2024-mask.svg'); + } +</style> |