Skip to content

Commit def209d

Browse files
webcrawlswebcrawls
committed
fix: move flicker logic to layout
1 parent ab49d0e commit def209d

File tree

5 files changed

+94
-100
lines changed

5 files changed

+94
-100
lines changed

‎src/lib/TVWrapperViewer.svelte‎

Lines changed: 6 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -21,18 +21,7 @@
2121
2222
let { baseTitle = '', metaTitle = '', entries = [] }: Props = $props();
2323
24-
let staticElement: HTMLElement = $state(undefined);
25-
let imageElement: HTMLElement = $state(undefined);
26-
let isFlicker: boolean = $state(false);
27-
28-
const flicker = () => {
29-
if (!imageElement) return;
30-
// crewImg.style.opacity = '0'
31-
isFlicker = true;
32-
// setTimeout(() => crewImg.style.opacity = '1', 150)
33-
setTimeout(() => (isFlicker = false), 250);
34-
};
35-
24+
let imageElement: HTMLElement = $state(undefined);
3625
let index: number = $state(0);
3726
let item: Entry = $state(entries[index]);
3827
run(() => {
@@ -43,8 +32,7 @@
4332
4433
const control = getContext('control');
4534
const prefersReduced = getContext('prefersReduced');
46-
// $: index = crewData.crew.indexOf($currentTeam)
47-
// $: $currentTeam && flicker()
35+
const {flicker} = control
4836
4937
onMount(() => {
5038
control.element = TVWrapperControl;
@@ -72,28 +60,20 @@
7260
</svelte:head>
7361

7462
<section class="image-wrapper">
75-
<img
76-
aria-hidden="true"
77-
bind:this={staticElement}
78-
class="static-image"
79-
class:hidden={!isFlicker}
80-
alt="Animated TV static, used to emulate the feel of a classic CRT monitor."
81-
src={'/static-crt.gif'}
82-
/>
8363
{#if item}
8464
<img
8565
bind:this={imageElement}
8666
class:no-image={!item.image}
8767
class="main-image"
8868
alt="An image of {item.name}."
89-
src={isFlicker ? '/invisible.png' : item.image}
69+
src={item.image}
9070
/>
91-
<section class="text-container" class:offset={index % 2 !== 0} class:hidden={isFlicker}>
71+
<section class="text-container" class:offset={index % 2 !== 0}>
9272
<h1>{baseTitle ?? 'n/a'}</h1>
9373
<p><b>{item.name ?? 'N/A'}</b></p>
9474
</section>
9575
{#if item.meta && item.meta.title}
96-
<section class="text-container alt" class:offset={index % 2 !== 0} class:hidden={isFlicker}>
76+
<section class="text-container alt" class:offset={index % 2 !== 0}>
9777
<h1>{metaTitle ?? 'n/a'}</h1>
9878
<p class="description-title"><b>{item.meta.title}</b></p>
9979
{#if item.meta.description && showDescription}
@@ -117,8 +97,7 @@
11797
left: 0;
11898
}
11999
120-
.main-image,
121-
.static-image {
100+
.main-image {
122101
position: absolute;
123102
width: 100%;
124103
height: 100%;
@@ -129,16 +108,6 @@
129108
padding-block: 4%;
130109
}
131110
132-
.static-image {
133-
opacity: 0.9;
134-
filter: contrast(0.5) blur(1px);
135-
object-fit: cover;
136-
}
137-
138-
.static-image.hidden {
139-
visibility: hidden;
140-
}
141-
142111
.text-container {
143112
pointer-events: all;
144113
position: absolute;
@@ -206,8 +175,4 @@
206175
.text-container p {
207176
font-size: clamp(14px, 3vw, 20px);
208177
}
209-
210-
.hidden {
211-
visibility: hidden;
212-
}
213178
</style>

‎src/lib/data/team.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@
3939
"fav_artist": "Waterparks"
4040
},
4141
{
42-
"name": "Kaden Scott",
42+
"name": "Kaden Swallow",
4343
"pronouns": "He/Him",
4444
"role": "Web Designer",
4545
"image": "/team/Kaden.jpg",
46-
"fav_artist": "Watsky",
47-
"fav_artist_desc": "My favourite artist is Watsky, having followed him from his Epic Rap Battle days, to releasing multiple groundbreaking albums that are constantly on repeat 🎵 Watching his sound develop over years of projects has been super cool and inspiring (￣▽￣)/♫•*¨*•.¸¸♪"
46+
"fav_artist": "RTJ",
47+
"fav_artist_desc": "Run the jewels fast run the run the jewels fast"
4848
},
4949
{
5050
"name": "Aidan Gabert",

‎src/routes/+layout.svelte‎

Lines changed: 82 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,27 @@
44
import Metadata from '$lib/Metadata.svelte';
55
import { browser } from '$app/environment';
66
import TvLoadingControl from '$lib/tv/TVLoadingControl.svelte';
7-
import band from '$lib/data/band.json'
7+
import band from '$lib/data/band.json';
8+
import { beforeNavigate } from '$app/navigation';
9+
810
interface Props {
911
children?: import('svelte').Snippet;
1012
}
1113
1214
let { children }: Props = $props();
1315
14-
const prefersReducedQuery = browser ? window.matchMedia('(prefers-reduced-motion: reduce)') : undefined
15-
const prefersReduced: Writable<boolean> = writable(prefersReducedQuery?.matches)
16-
setContext("prefersReduced", prefersReduced)
16+
const prefersReducedQuery = browser
17+
? window.matchMedia('(prefers-reduced-motion: reduce)')
18+
: undefined;
19+
const prefersReduced: Writable<boolean> = writable(prefersReducedQuery?.matches);
20+
setContext('prefersReduced', prefersReduced);
1721
18-
const control = $state({ element: undefined, props: {}})
19-
const ControlElement = $derived(control.element ?? TvLoadingControl)
22+
const flicker = () => {
23+
showStatic = true;
24+
setTimeout(() => (showStatic = false), 500);
25+
};
26+
const control = $state({ element: undefined, props: {}, flicker });
27+
const ControlElement = $derived(control.element ?? TvLoadingControl);
2028
2129
setContext('control', control);
2230
@@ -25,9 +33,18 @@
2533
wrapper.scrollIntoView({ behavior: 'auto', block: 'center', inline: 'center' });
2634
};
2735
36+
2837
onMount(() => {
2938
new ResizeObserver(() => setTimeout(() => centerTv(), 10)).observe(document.body);
30-
prefersReducedQuery?.addEventListener("change", () => {$prefersReduced = prefersReducedQuery.matches})
39+
prefersReducedQuery?.addEventListener('change', () => {
40+
$prefersReduced = prefersReducedQuery.matches;
41+
});
42+
});
43+
44+
let showStatic: boolean = $state(false);
45+
46+
beforeNavigate(() => {
47+
flicker();
3148
});
3249
</script>
3350

@@ -55,8 +72,10 @@
5572
</aside>
5673
<section>
5774
<div class="section-bg"></div>
58-
<div class="content-wrapper">
59-
{@render children?.()}
75+
<div class="content-wrapper" class:static={showStatic}>
76+
<div class="content-inner" class:hidden={showStatic}>
77+
{@render children?.()}
78+
</div>
6079
</div>
6180
</section>
6281
</main>
@@ -67,49 +86,40 @@
6786
<div class="section-group">
6887
<nav class="section">
6988
<h1>follow us <span class="arrows">>></span></h1>
70-
<a href={band.links.instagram}
71-
rel="external"
72-
class="icon-link"><img
73-
alt="instagram"
74-
src="/icons/instagram.svg" /></a>
75-
<a href={band.links.tiktok}
76-
rel="external"
77-
class="icon-link"><img
78-
alt="tiktok"
79-
src="/icons/tiktok.svg" /></a>
80-
<a href={band.links.youtube}
81-
rel="external"
82-
class="icon-link"><img
83-
alt="youtube"
84-
src="/icons/youtube.svg" /></a>
89+
<a href={band.links.instagram} rel="external" class="icon-link"
90+
><img alt="instagram" src="/icons/instagram.svg" /></a
91+
>
92+
<a href={band.links.tiktok} rel="external" class="icon-link"
93+
><img alt="tiktok" src="/icons/tiktok.svg" /></a
94+
>
95+
<a href={band.links.youtube} rel="external" class="icon-link"
96+
><img alt="youtube" src="/icons/youtube.svg" /></a
97+
>
8598
</nav>
8699
<nav class="section">
87-
<h1><a rel="external" href={band.links.hearnow}>stream us</a> <span
88-
class="arrows">>></span></h1>
89-
<a
90-
href={band.links.spotify}
91-
rel="external"
92-
class="icon-link">
93-
<img alt="spotify"
94-
src="/icons/spotify.svg" /></a>
95-
<a href={band.links.apple}
96-
rel="external"
97-
class="icon-link">
98-
<img alt="apple"
99-
src="/icons/apple.svg" />
100+
<h1>
101+
<a rel="external" href={band.links.hearnow}>stream us</a>
102+
<span class="arrows">>></span>
103+
</h1>
104+
<a href={band.links.spotify} rel="external" class="icon-link">
105+
<img alt="spotify" src="/icons/spotify.svg" /></a
106+
>
107+
<a href={band.links.apple} rel="external" class="icon-link">
108+
<img alt="apple" src="/icons/apple.svg" />
100109
</a>
101-
<a href={band.links.amazon}
102-
rel="external"
103-
class="icon-link">
104-
<img alt="amazon"
105-
src="/icons/amazon.svg" /></a>
110+
<a href={band.links.amazon} rel="external" class="icon-link">
111+
<img alt="amazon" src="/icons/amazon.svg" /></a
112+
>
106113
</nav>
107114
</div>
108115
</div>
109116
<div class="image-bin">
110117
<a rel="external" href="https://www.sheridancollege.ca">
111-
<img src="/logo/sheridan-logo.png" alt="The Sheridan college logo."
112-
style="filter: invert(94%) sepia(94%) saturate(0%) hue-rotate(241deg) brightness(106%) contrast(105%);" />
118+
<img
119+
src="/logo/sheridan-logo.png"
120+
alt="The Sheridan college logo."
121+
style="filter: invert(94%) sepia(94%) saturate(0%) hue-rotate(241deg) brightness(106%) contrast(105%);"
122+
/>
113123
</a>
114124
<img src="/logo/blf-logo.png" alt="The Borderline Fever logo." />
115125
</div>
@@ -118,14 +128,31 @@
118128
</div>
119129

120130
<style>
121-
.icon-link img {
122-
filter: invert(100%) sepia(9%) saturate(1%) hue-rotate(67deg) brightness(101%) contrast(101%);
123-
width: 24px;
124-
height: 24px;
125-
}
126-
127-
#credits {
128-
opacity: 0.7;
129-
font-style: italic;
130-
}
131-
</style>
131+
.icon-link img {
132+
filter: invert(100%) sepia(9%) saturate(1%) hue-rotate(67deg) brightness(101%) contrast(101%);
133+
width: 24px;
134+
height: 24px;
135+
}
136+
137+
#credits {
138+
opacity: 0.7;
139+
font-style: italic;
140+
}
141+
142+
.content-wrapper {
143+
z-index: -1;
144+
}
145+
146+
.content-inner {
147+
width: 100%;
148+
height: 100%;
149+
}
150+
151+
.content-inner.hidden {
152+
visibility: hidden;
153+
}
154+
155+
.content-wrapper.static {
156+
background-image: url('/static-crt.gif');
157+
}
158+
</style>

‎src/routes/about/+page.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
99
onMount(() => {
1010
control.element = TVScrollHint
11-
control.props = { scoller }
11+
control.props = { scroller }
1212
})
1313
</script>
1414

‎src/routes/team/+page.svelte‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
<script lang="ts">
22
import TVWrapperViewer from "$lib/TVWrapperViewer.svelte";
33
import crewData from '$lib/data/team.json'
4+
import { getContext } from "svelte";
5+
46
57
let entries: {
68
name: string,

0 commit comments

Comments
 (0)