feat: add typescript sample

Introduces a new `samples` folder to centralize integration examples. Currently, the folder includes a vanilla TypeScript sample. This sample serves as a starting point for integrators, demonstrating how to incorporate our library into TypeScript projects. Samples will be designed to be easily accessible and interactive, supporting StackBlitz integration for on-demand playgrounds. Integrators can experiment and test various configurations directly in the browser.
SRGSSR · Mar 13, 2024 · 4ad8bfe · 4ad8bfe
1 parent 2500c7b
commit 4ad8bfe
Show file tree

Hide file tree

Showing 10 changed files with 179 additions and 0 deletions.
diff --git a/samples/README.md b/samples/README.md
@@ -0,0 +1,5 @@
+# Pillarbox Integration Samples
+
+This "samples" folder contains various projects demonstrating how to integrate our library with
+different technologies. Each subfolder represents a separate project, showcasing integration with
+popular frameworks and languages such as TypeScript, React, or Angular.
diff --git a/samples/vanilla-ts/README.md b/samples/vanilla-ts/README.md
@@ -0,0 +1,31 @@
+# pillarbox-web typescript sample
+
+This project demonstrates the integration og pillarbox with typescript. Feel free to explore and
+experiment with this sample via the following playground:
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)][stackblitz]
+
+You can also use this project as a template.
+
+## Quick guide
+
+This project uses [Vite][vite] for building and previewing the example. The following commands are
+available:
+
+- Rune the server in development mode.
+  ```shell
+  npm run dev
+  ```
+
+- Compile Typescript and build the project.
+  ```shell
+  npm run build
+  ```
+
+- Preview the compiled project:
+  ```shell
+  npm run preview
+  ```
+
+[stackblitz]: https://stackblitz.com/github/srgssr/pillarbox-web-demo/tree/main/samples/vanilla-ts
+[vite]: https://vitejs.dev/
diff --git a/samples/vanilla-ts/index.html b/samples/vanilla-ts/index.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8"/>
+  <link rel="icon" type="image/x-icon" href="/favicon.ico"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Pillarbox + Typescript</title>
+  <link rel="stylesheet" href="src/index.css"/>
+</head>
+<body>
+<header>
+  <div class="logo-container">
+    <img src="/pb.webp" class="logo" alt="TypeScript logo"/>
+    <img src="/ts.svg" class="logo ts" alt="TypeScript logo"/>
+  </div>
+  <h1>Pillarbox + Typescript</h1>
+</header>
+<div class="player-container">
+  <video-js id="main-player" class="pillarbox-js" controls crossorigin="anonymous"></video-js>
+</div>
+<script type="module" src="/src/app.ts"></script>
+</body>
+</html>
diff --git a/samples/vanilla-ts/package.json b/samples/vanilla-ts/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "vanilla-ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  },
+  "dependencies": {
+    "@srgssr/pillarbox-web": "^1.1.0",
+    "open-props": "^1.6.21"
+  }
+}
diff --git a/samples/vanilla-ts/public/favicon.ico b/samples/vanilla-ts/public/favicon.ico
diff --git a/samples/vanilla-ts/public/pb.webp b/samples/vanilla-ts/public/pb.webp
diff --git a/samples/vanilla-ts/public/ts.svg b/samples/vanilla-ts/public/ts.svg
diff --git a/samples/vanilla-ts/src/app.ts b/samples/vanilla-ts/src/app.ts
@@ -0,0 +1,4 @@
+import {default as pillarbox, Player as PillarboxPlayer} from "@srgssr/pillarbox-web";
+
+const player = pillarbox('main-player', {fill: true}) as PillarboxPlayer;
+player.src({src: 'urn:rts:video:14646794', type: 'srgssr/urn'});
diff --git a/samples/vanilla-ts/src/index.css b/samples/vanilla-ts/src/index.css
@@ -0,0 +1,73 @@
+@import '@srgssr/pillarbox-web';
+@import "open-props/open-props.min.css";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  --brand-color: var(--red-11);
+  --text-color-1: var(--gray-3);
+  --text-color-2: var(--gray-4);
+  --surface-color-1: var(--gray-8);
+  --surface-color-2: var(--gray-7);
+  --surface-color-3: var(--gray-6);
+  --surface-color-4: var(--gray-5);
+
+  overflow-y: scroll;
+}
+
+body {
+  max-width: var(--size-md);
+  min-height: 100%;
+  margin: 0 auto;
+  color: var(--text-color-1);
+  font-size: var(--size-5);
+  font-family: var(--font-sans);
+  background-color: var(--surface-color-1);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-weight: var(--font-weight-9);
+  line-height: var(--font-lineheight-1);
+}
+
+h1 {
+  margin: 0;
+  text-align: center;
+  text-shadow: 2px 3px 0 var(--gray-10);
+}
+
+@media screen and (width <= 768px) {
+  h1 {
+    font-size: var(--size-7);
+  }
+}
+
+header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: var(--size-5) 0;
+  column-gap: var(--size-3);
+}
+
+.player-container {
+  width: 100%;
+  height: auto;
+  aspect-ratio: var(--ratio-widescreen);
+  padding: 0;
+  box-shadow: var(--shadow-3);
+}
+
+.logo {
+  height: var(--size-10);
+}
+
+.logo.ts {
+  padding: var(--size-2);
+}
diff --git a/samples/vanilla-ts/tsconfig.json b/samples/vanilla-ts/tsconfig.json
@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}