chore: add stencil examples

g3r4n · Sep 21, 2020 · 8470f8d · 8470f8d
1 parent fb0fd4c
commit 8470f8d
Show file tree

Hide file tree

Showing 174 changed files with 3,953 additions and 370 deletions.
diff --git a/README.md b/README.md
@@ -42,7 +42,7 @@ A customizable media player built with [web components][web-components].
 - 🛠 &nbsp;Comprehensive [player API][player-api] with a heap of properties, methods and events.
 - 💪 &nbsp;Built with TypeScript so you can enjoy completely typed components.
 - 🏠 &nbsp;Feel right at home with HTML/CSS/JS thanks to web components.
-- 🏗️ &nbsp;Framework specific bindings for React, Vue, Svelte and Angular.
+- 🏗️ &nbsp;Framework specific bindings for React, Vue, Svelte, Stencil and Angular.
 
 [web-components]: https://developer.mozilla.org/en-US/docs/Web/Web_Components
 [accessibility]: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
@@ -55,8 +55,8 @@ A customizable media player built with [web components][web-components].
 
 ## 🍭 Examples
 
-**The examples below are using web components but there are bindings for React, Vue, Angular and 
-Svelte. If you want to see how they look check out our [Demo](https://vimejs.com/demo).**
+**The examples below are using web components but there are bindings for React, Vue, Svelte, Stencil 
+and Angular. If you want to see how they look check out our [Demo](https://vimejs.com/demo).**
 
 ```html
 <vime-player autoplay muted>
@@ -126,8 +126,9 @@ There are framework specific bindings for:
 
 - [React](https://vimejs.com/getting-started/installation#react)
 - [Vue](https://vimejs.com/getting-started/installation#vue)
-- [Angular](https://vimejs.com/getting-started/installation#angular)
 - [Svelte](https://vimejs.com/getting-started/installation#svelte)
+- [Stencil](https://vimejs.com/getting-started/installation#stencil)
+- [Angular](https://vimejs.com/getting-started/installation#angular)
 
 Keep in mind, that at its core Vime is still simply web components. Even if your framework is
 not mentioned in the list above, it most likely still supports Vime natively. You can check
@@ -139,8 +140,9 @@ There are also [examples](./examples) for loading and using Vime with:
 - [HTML](./examples/html)
 - [React](./examples/react)
 - [Vue](./examples/vue)
-- [Angular](./examples/angular)
 - [Svelte](./examples/svelte)
+- [Stencil](./examples/stencil)
+- [Angular](./examples/angular)
 
 ## 🖥️ Browsers
 

diff --git a/docs/docs/components/core/embed.md b/docs/docs/components/core/embed.md
@@ -23,6 +23,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -149,6 +150,32 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx
+class Example {
+  private onMessage(event: CustomEvent<any>) {
+    const message = event.detail;
+    // ...
+  }
+
+  render() {
+    return (
+      <vime-embed
+        embedSrc="https://www.youtube-nocookie.com/embed/DyTCOwB0DVw"
+        params={{ autoplay: 1, muted: 1, controls: 0 }}
+        mediaTitle="Agent 327: Operation Barbershop"
+        origin="https://www.youtube-nocookie.com"
+        onVEmbedMessage={this.onMessage.bind(this)}
+      />
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html title="example.html"

diff --git a/docs/docs/components/core/player.md b/docs/docs/components/core/player.md
@@ -22,6 +22,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -234,6 +235,60 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx
+import { h } from '@stencil/core';
+
+class Example {
+  private player!: HTMLVimePlayerElement;
+
+  @State() currentTime = 0;
+
+  // Example method to showcase updating property.
+  private seekForward() {
+    this.currentTime += 5;
+  }
+
+  // Example method to showcase calling player method.
+  private enterFullscreen() {
+    this.player.enterFulllscreen();
+  }
+
+  private onTimeUpdate(event: CustomEvent<number>) {
+    this.currentTime = event.detail;
+  }
+
+  private onFullscreenChange(event: CustomEvent<boolean>) {
+    const isFullscreen = event.detail;
+    // ...
+  }
+
+  render() {
+    return (
+      <vime-player
+        controls
+        autoplay
+        muted
+        currentTime={this.currentTime}
+        onVCurrentTimeChange={this.onTimeUpdate.bind(this)}
+        onVFullscreenChange={this.onFullscreenChange.bind(this)}
+        ref={(el) => {
+          this.player = el;
+        }}
+      >
+        {/* Provider component is placed here. */}
+
+        <vime-ui>{/* UI components are placed here. */}</vime-ui>
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html title="example.html"

diff --git a/docs/docs/components/providers/audio.md b/docs/docs/components/providers/audio.md
@@ -22,6 +22,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -109,6 +110,27 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx {5-8}
+class Example {
+  render() {
+    return (
+      <vime-player controls>
+        <vime-audio>
+          <source data-src="/media/audio.mp3" type="audio/mp3" />
+          {/* <source> and <track> elements are placed here. */}
+        </vime-audio>
+        {/* ... */}
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html {2-5} title="example.html"

diff --git a/docs/docs/components/providers/dailymotion.md b/docs/docs/components/providers/dailymotion.md
@@ -29,6 +29,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -104,6 +105,24 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx {5}
+class Example {
+  render() {
+    return (
+      <vime-player controls>
+        <vime-dailymotion videoId="k3b11PemcuTrmWvYe0q" />
+        {/* ... */}
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html {2-5} title="example.html"

diff --git a/docs/docs/components/providers/dash.md b/docs/docs/components/providers/dash.md
@@ -23,6 +23,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -140,6 +141,28 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx {5-9}
+class Example {
+  render() {
+    return (
+      <vime-player controls>
+        <vime-dash
+          src="/media/manifest.mpd"
+          version="latest"
+          poster="/media/poster.png"
+        />
+        {/* ... */}
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html {2-7} title="example.html"

diff --git a/docs/docs/components/providers/hls.md b/docs/docs/components/providers/hls.md
@@ -22,6 +22,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -132,6 +133,32 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx {5-13}
+class Example {
+  render() {
+    return (
+      <vime-player controls>
+        <vime-hls version="latest" poster="/media/poster.png">
+          <source data-src="/media/index.m3u8" type="application/x-mpegURL" />
+          <track
+            default
+            kind="subtitles"
+            src="/media/subs/en.vtt"
+            srclang="en"
+          />
+        </vime-hls>
+        {/* ... */}
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html {2-5} title="example.html"

diff --git a/docs/docs/components/providers/video.md b/docs/docs/components/providers/video.md
@@ -22,6 +22,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -157,6 +158,39 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx {5-20}
+class Example {
+  render() {
+    return (
+      <vime-player controls>
+        <vime-video poster="/media/poster.png">
+          <source data-src="/media/video.mp4" type="video/mp4" />
+          <track
+            default
+            kind="subtitles"
+            src="/media/subs/en.vtt"
+            srclang="en"
+            label="English"
+          />
+          <track
+            kind="captions"
+            src="/media/caps/es.vtt"
+            srclang="es"
+            label="Spanish"
+          />
+        </vime-video>
+        {/* ... */}
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html {2-17} title="example.html"

diff --git a/docs/docs/components/providers/vimeo.md b/docs/docs/components/providers/vimeo.md
@@ -28,6 +28,7 @@ values={[
 { label: 'React', value: 'react' },
 { label: 'Vue', value: 'vue' },
 { label: 'Svelte', value: 'svelte' },
+{ label: 'Stencil', value: 'stencil' },
 { label: 'Angular', value: 'angular' }
 ]}>
 
@@ -103,6 +104,24 @@ function Example() {
 </TabItem>
 
 
+<TabItem value="stencil">
+
+```tsx {5}
+class Example {
+  render() {
+    return (
+      <vime-player controls>
+        <vime-vimeo videoId="411652396" />
+        {/* ... */}
+      </vime-player>
+    );
+  }
+}
+```
+
+</TabItem>
+
+
 <TabItem value="angular">
 
 ```html {2} title="example.html"