feat: video

src/app/app.tsx

@@ -2,20 +2,22 @@ import {
   About,
   Banner,
   Footer,
+  Video,
   Header,
   Speakers,
   Supports,
   GetInvolved,
-} from './sections'
-import {GTM, Symbols} from './parts'
-import {config} from './config'
-import {contributes, speakers, supports} from '../data'
+} from "./sections";
+import { GTM, Symbols } from "./parts";
+import { config } from "./config";
+import { contributes, speakers, supports } from "../data";
 
-config.addSection('Topo', <Banner />)
-config.addSection('Comunidade', <About />)
-config.addSection('Palestras confirmadas', <Speakers speakers={speakers} />)
-config.addSection('Contribua', <GetInvolved contributes={contributes} />)
-config.addSection('Faça acontecer', <Supports supports={supports} />)
+config.addSection("Topo", <Banner />);
+config.addSection("Comunidade", <About />);
+config.addSection("Palestras confirmadas", <Speakers speakers={speakers} />);
+config.addSection("Vídeo", <Video src="/assets/videos/conf-2023.mp4" />);
+config.addSection("Contribua", <GetInvolved contributes={contributes} />);
+config.addSection("Faça acontecer", <Supports supports={supports} />);
 
 export const App = () => {
   return (
@@ -26,5 +28,5 @@ export const App = () => {
       <Symbols />
       <GTM />
     </>
-  )
-}
+  );
+};

src/app/components/index.ts

@@ -1,4 +1,4 @@
-export * from './description-dialog';
-export * from './dialog-container';
-export * from './google-form-dialog';
-export * from './dialog';
+export * from "./description-dialog";
+export * from "./dialog-container";
+export * from "./google-form-dialog";
+export * from "./dialog";

src/app/config.ts

@@ -1,32 +1,33 @@
-import {slugify} from './utils'
+import { slugify } from "./utils";
 
 type Section =
-  | 'Topo'
-  | 'Comunidade'
-  | 'Palestras confirmadas'
-  | 'Contribua'
-  | 'Faça acontecer'
-  | 'Depoimentos'
-  | 'Contato'
+  | "Topo"
+  | "Comunidade"
+  | "Palestras confirmadas"
+  | "Contribua"
+  | "Faça acontecer"
+  | "Depoimentos"
+  | "Vídeo"
+  | "Contato";
 
 class Config {
-  #elements: HTMLElement[] = []
-  #navigation: [string, string][] = []
+  #elements: HTMLElement[] = [];
+  #navigation: [string, string][] = [];
 
   get elements() {
-    return this.#elements
+    return this.#elements;
   }
 
   get navigation() {
-    return this.#navigation
+    return this.#navigation;
   }
 
   addSection(name: Section, element: JSX.Element) {
-    const id = slugify(name)
-    element.id = id
-    this.#elements.push(element)
-    this.#navigation.push([`#${id}`, name])
+    const id = slugify(name);
+    element.id = id;
+    this.#elements.push(element);
+    this.#navigation.push([`#${id}`, name]);
   }
 }
 
-export const config = new Config()
+export const config = new Config();

src/app/parts/index.ts

@@ -1,10 +1,10 @@
-export * from './codaqui';
-export * from './countdown';
-export * from './dev-parana';
-export * from './gtm';
-export * from './icon';
-export * from './link';
-export * from './logo';
-export * from './social-links';
-export * from './symbols';
-export * from './theme-toggle';
+export * from "./codaqui";
+export * from "./countdown";
+export * from "./dev-parana";
+export * from "./gtm";
+export * from "./icon";
+export * from "./link";
+export * from "./logo";
+export * from "./social-links";
+export * from "./symbols";
+export * from "./theme-toggle";

src/app/parts/social-links.tsx

@@ -11,7 +11,7 @@ export const SocialLinks = ({links}: SocialLinksAttrs) => {
     <ul className="social-links">
       {links.map((link) => {
         return (
-          <Link href={link.href} target="_blank">
+          <Link href={link.href} ariaLabel={link.kind} target="_blank">
             <Icon name={link.kind} />
             <span>{link.kind}</span>
           </Link>

src/app/sections/index.ts

@@ -1,9 +1,10 @@
-export * from './about';
-export * from './banner';
-export * from './get-involved';
-export * from './contact';
-export * from './footer';
-export * from './header';
-export * from './speakers';
-export * from './supports';
-export * from './testimonials';
+export * from "./about";
+export * from "./banner";
+export * from "./contact";
+export * from "./footer";
+export * from "./get-involved";
+export * from "./header";
+export * from "./speakers";
+export * from "./supports";
+export * from "./testimonials";
+export * from "./video";

src/app/sections/video.tsx

@@ -0,0 +1,39 @@
+import { create } from "../utils";
+
+export interface VideoAttrs {
+  src: string;
+}
+
+export const Video = ({ src }: VideoAttrs) => {
+  const video = create(
+    "video",
+    { preload: "metadata", tabIndex: 0 },
+    create("source", {
+      src,
+      type: 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"',
+    })
+  );
+
+  queueMicrotask(() => {
+    const handle = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (navigator.userActivation.hasBeenActive) {
+          if (entry.isIntersecting && video.paused) video.play();
+          else if (!video.paused) video.pause();
+        }
+      });
+    };
+
+    const options = { rootMargin: "0px", threshold: 0 };
+
+    const observer = new IntersectionObserver(handle, options);
+    video.onloadeddata = () => observer.observe(video);
+  });
+
+  return (
+    <section id="video" className="video">
+      {video}
+      <div></div>
+    </section>
+  );
+};

src/app/utils/counter.ts

@@ -1,16 +1,16 @@
 export function counter(date: Date) {
-  const distance = date.getTime() - new Date().getTime()
+  const distance = date.getTime() - new Date().getTime();
   const base = {
     day: 1000 * 60 * 60 * 24,
     hour: 1000 * 60 * 60,
     min: 1000 * 60,
     sec: 1000,
-  }
+  };
 
-  const days = Math.floor(distance / base.day)
-  const hours = Math.floor((distance % base.day) / base.hour)
-  const mins = Math.floor((distance % base.hour) / base.min)
-  const secs = Math.floor((distance % base.min) / base.sec)
+  const days = Math.floor(distance / base.day);
+  const hours = Math.floor((distance % base.day) / base.hour);
+  const mins = Math.floor((distance % base.hour) / base.min);
+  const secs = Math.floor((distance % base.min) / base.sec);
 
-  return {distance, days, hours, mins, secs}
+  return { distance, days, hours, mins, secs };
 }

src/app/utils/create.ts

@@ -1,24 +1,24 @@
 type CreateParams<
   K extends keyof HTMLElementTagNameMap,
-  A extends HTMLElementTagNameMap[K]
-> = [Partial<A>, ...(Text | Node)[]] | (Text | Node)[]
+  A extends HTMLElementTagNameMap[K],
+> = [Partial<A>, ...(Text | Node)[]] | (Text | Node)[];
 
 export function create<
   K extends keyof HTMLElementTagNameMap,
-  A extends HTMLElementTagNameMap[K]
+  A extends HTMLElementTagNameMap[K],
 >(
   name: K,
   ...[attrs, ...children]: CreateParams<K, A>
 ): HTMLElementTagNameMap[K] {
-  const element = document.createElement(name)
+  const element = document.createElement(name);
 
   if (attrs instanceof Element) {
-    element.append(attrs, ...(children as Node[]))
+    element.append(attrs, ...(children as Node[]));
   } else {
-    element.append(...(children as Node[]))
+    element.append(...(children as Node[]));
 
-    Object.assign(element, attrs)
+    Object.assign(element, attrs);
   }
 
-  return element
+  return element;
 }

src/app/utils/find.ts

@@ -1,19 +1,55 @@
-function find<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: HTMLElement | ShadowRoot): HTMLElementTagNameMap[K]
-function find<K extends keyof HTMLElementTagNameMap>(selector: `${K}.${string}`, parent?: HTMLElement | ShadowRoot): HTMLElementTagNameMap[K]
-function find<K extends keyof HTMLElementTagNameMap>(selector: `${K}#${string}`, parent?: HTMLElement | ShadowRoot): HTMLElementTagNameMap[K]
-function find<K extends keyof HTMLElementTagNameMap>(selector: `${K}[${string}]`, parent?: HTMLElement | ShadowRoot): HTMLElementTagNameMap[K]
-function find<K extends keyof HTMLElementTagNameMap>(selector: `${string}`, parent?: HTMLElement | ShadowRoot): HTMLElement
-function find<T extends string>(selector: T, parent: HTMLElement | ShadowRoot = document.body) {
-  return parent.querySelector(selector)
-};
+function find<K extends keyof HTMLElementTagNameMap>(
+  selector: K,
+  parent?: HTMLElement | ShadowRoot,
+): HTMLElementTagNameMap[K];
+function find<K extends keyof HTMLElementTagNameMap>(
+  selector: `${K}.${string}`,
+  parent?: HTMLElement | ShadowRoot,
+): HTMLElementTagNameMap[K];
+function find<K extends keyof HTMLElementTagNameMap>(
+  selector: `${K}#${string}`,
+  parent?: HTMLElement | ShadowRoot,
+): HTMLElementTagNameMap[K];
+function find<K extends keyof HTMLElementTagNameMap>(
+  selector: `${K}[${string}]`,
+  parent?: HTMLElement | ShadowRoot,
+): HTMLElementTagNameMap[K];
+function find<K extends keyof HTMLElementTagNameMap>(
+  selector: `${string}`,
+  parent?: HTMLElement | ShadowRoot,
+): HTMLElement;
+function find<T extends string>(
+  selector: T,
+  parent: HTMLElement | ShadowRoot = document.body,
+) {
+  return parent.querySelector(selector);
+}
 
-function findAll<K extends keyof HTMLElementTagNameMap>(selector: K, parent?: HTMLElement | ShadowRoot): NodeListOf<HTMLElementTagNameMap[K]>
-function findAll<K extends keyof HTMLElementTagNameMap>(selector: `${K}.${string}`, parent?: HTMLElement | ShadowRoot): NodeListOf<HTMLElementTagNameMap[K]>
-function findAll<K extends keyof HTMLElementTagNameMap>(selector: `${K}#${string}`, parent?: HTMLElement | ShadowRoot): NodeListOf<HTMLElementTagNameMap[K]>
-function findAll<K extends keyof HTMLElementTagNameMap>(selector: `${K}[${string}]`, parent?: HTMLElement | ShadowRoot): NodeListOf<HTMLElementTagNameMap[K]>
-function findAll<K extends keyof HTMLElementTagNameMap>(selector: `${string}`, parent?: HTMLElement | ShadowRoot): NodeListOf<HTMLElement>
-function findAll<T extends string>(selector: T, parent: HTMLElement | ShadowRoot = document.body) {
-  return parent.querySelectorAll(selector)
-};
+function findAll<K extends keyof HTMLElementTagNameMap>(
+  selector: K,
+  parent?: HTMLElement | ShadowRoot,
+): NodeListOf<HTMLElementTagNameMap[K]>;
+function findAll<K extends keyof HTMLElementTagNameMap>(
+  selector: `${K}.${string}`,
+  parent?: HTMLElement | ShadowRoot,
+): NodeListOf<HTMLElementTagNameMap[K]>;
+function findAll<K extends keyof HTMLElementTagNameMap>(
+  selector: `${K}#${string}`,
+  parent?: HTMLElement | ShadowRoot,
+): NodeListOf<HTMLElementTagNameMap[K]>;
+function findAll<K extends keyof HTMLElementTagNameMap>(
+  selector: `${K}[${string}]`,
+  parent?: HTMLElement | ShadowRoot,
+): NodeListOf<HTMLElementTagNameMap[K]>;
+function findAll<K extends keyof HTMLElementTagNameMap>(
+  selector: `${string}`,
+  parent?: HTMLElement | ShadowRoot,
+): NodeListOf<HTMLElement>;
+function findAll<T extends string>(
+  selector: T,
+  parent: HTMLElement | ShadowRoot = document.body,
+) {
+  return parent.querySelectorAll(selector);
+}
 
-export { find, findAll }
+export { find, findAll };

src/app/utils/index.ts

@@ -1,9 +1,9 @@
-export * from './counter';
-export * from './create';
-export * from './find';
-export * from './interval';
-export * from './scroll-spy';
-export * from './size';
-export * from './slugify';
-export * from './styled';
-export * from './timeout';
+export * from "./counter";
+export * from "./create";
+export * from "./find";
+export * from "./interval";
+export * from "./scroll-spy";
+export * from "./size";
+export * from "./slugify";
+export * from "./styled";
+export * from "./timeout";

src/app/utils/interval.ts

@@ -1,5 +1,5 @@
 export function interval(handler: TimerHandler, ms = 1000) {
-  const ref = window.setInterval(handler, ms)
-  const cancel = () => window.clearInterval(ref)
-  return {cancel}
+  const ref = window.setInterval(handler, ms);
+  const cancel = () => window.clearInterval(ref);
+  return { cancel };
 }