diff --git a/samples/README.md b/samples/README.md new file mode 100644 index 0000000..393e400 --- /dev/null +++ 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 new file mode 100644 index 0000000..bb8c8f8 --- /dev/null +++ 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 new file mode 100644 index 0000000..d956ba0 --- /dev/null +++ b/samples/vanilla-ts/index.html @@ -0,0 +1,23 @@ + + + + + + + Pillarbox + Typescript + + + +
+
+ + +
+

Pillarbox + Typescript

+
+
+ +
+ + + diff --git a/samples/vanilla-ts/package.json b/samples/vanilla-ts/package.json new file mode 100644 index 0000000..c3fc03a --- /dev/null +++ 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 new file mode 100644 index 0000000..e69de29 diff --git a/samples/vanilla-ts/public/pb.webp b/samples/vanilla-ts/public/pb.webp new file mode 100644 index 0000000..65aa96f Binary files /dev/null and b/samples/vanilla-ts/public/pb.webp differ diff --git a/samples/vanilla-ts/public/ts.svg b/samples/vanilla-ts/public/ts.svg new file mode 100644 index 0000000..221f936 --- /dev/null +++ b/samples/vanilla-ts/public/ts.svg @@ -0,0 +1 @@ + diff --git a/samples/vanilla-ts/src/app.ts b/samples/vanilla-ts/src/app.ts new file mode 100644 index 0000000..49c7f05 --- /dev/null +++ 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 new file mode 100644 index 0000000..6dc89f3 --- /dev/null +++ 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 new file mode 100644 index 0000000..75abdef --- /dev/null +++ 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"] +}