feat: add vimeo-video

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.github/scripts/publish.sh

@@ -0,0 +1,36 @@
+#!/usr/bin/env bash
+
+# npm publish with goodies
+# inspired by https://gist.github.com/stevemao/280ef22ee861323993a0
+#
+# prerequisites:
+# `npm install -D conventional-recommended-bump \
+#   conventional-changelog-cli conventional-github-releaser`
+# `release` with optional argument `patch`/`minor`/`major`/`<version>`
+# defaults to conventional-recommended-bump
+
+# `np` is not suitable for CI/CD
+# https://github.com/sindresorhus/np/issues/619#issuecomment-994493179
+
+release() {
+  BUMP=$(npx -p conventional-changelog-angular -p conventional-recommended-bump -c 'conventional-recommended-bump -p angular')
+  VERSION=$(npm --no-git-tag-version version ${1:-$BUMP})
+  npx conventional-changelog-cli -p angular -i CHANGELOG.md -s
+  git add CHANGELOG.md
+  git commit -m "docs(CHANGELOG): $VERSION"
+  npm --force --allow-same-version version $VERSION -m "chore(release): %s"
+  git push --follow-tags
+  npx conventional-github-releaser -p angular
+  npm publish --access public
+};
+
+canary() {
+  # get last published version from NPM without alpha / beta, remove -SHA hash
+  LAST_VERSION=$(npm view vimeo-video-element versions --json |
+    jq -r '. - map(select(contains("alpha") or contains("beta"))) | last' |
+    sed -r 's/-[a-z0-9]{7}$//g')
+  PRE_VERSION=$(npx semver $LAST_VERSION -i prerelease --preid canary)
+  VERSION=$PRE_VERSION-$(git rev-parse --short HEAD)
+  npm --no-git-tag-version version $VERSION
+  npm publish --tag canary
+}

.github/workflows/cd.yml

@@ -0,0 +1,47 @@
+name: CD
+
+concurrency: production
+
+on:
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+    inputs:
+      version_type:
+        type: choice
+        required: true
+        description: Version
+        options:
+        - conventional
+        - patch
+        - minor
+        - major
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    environment: production
+
+    env:
+      NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      CONVENTIONAL_GITHUB_RELEASER_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # Fetch all history for all tags and branches
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          # this line is required for the setup-node action to be able to run the npm publish below.
+          registry-url: 'https://registry.npmjs.org'
+      - uses: fregante/setup-git-user@v1
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+      - run: . ./.github/scripts/publish.sh; release ${{ inputs.version_type }}
+        if: ${{ inputs.version_type != 'conventional' }}
+        shell: bash
+      - run: . ./.github/scripts/publish.sh; release
+        if: ${{ inputs.version_type == 'conventional' }}
+        shell: bash

.github/workflows/ci.yml

@@ -0,0 +1,14 @@
+name: CI
+
+on: [push, pull_request]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+      - run: npm ci
+      - run: npm run build
+      - run: npm test

.gitignore

@@ -0,0 +1,3 @@
+/dist/
+/node_modules/
+/.DS_Store

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Wesley Luyten
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,51 @@
+# `<vimeo-video>`
+
+A custom element (web component) for Vimeo.
+
+The element API matches the HTML5 `<video>` tag, so it can be easily swapped with other media, and be compatible with other UI components that work with the video tag.
+
+One of the goals was to have `<vimeo-video>` seamlessly integrate with [Media Chrome](https://github.com/muxinc/media-chrome).
+
+## Example ([CodeSandbox](https://codesandbox.io/s/vimeo-video-element-kvu1fv))
+
+<!-- prettier-ignore -->
+```html
+<script type="module" src="https://unpkg.com/vimeo-video-element@0"></script>
+<vimeo-video controls src="https://vimeo.com/648359100"></vimeo-video>
+```
+
+## Installing
+
+`<vimeo-video>` is packaged as a javascript module (es6) only, which is supported by all evergreen browsers and Node v12+.
+
+### Loading into your HTML using `<script>`
+
+<!-- prettier-ignore -->
+```html
+<script type="module" src="https://unpkg.com/vimeo-video-element@0"></script>
+```
+
+### Adding to your app via `npm`
+
+```bash
+npm install vimeo-video-element --save
+```
+
+Include in your app javascript (e.g. src/App.js)
+
+```js
+import 'vimeo-video-element';
+```
+
+This will register the custom elements with the browser so they can be used as HTML.
+
+## Related
+
+- [Media Chrome](https://github.com/muxinc/media-chrome) Your media player's dancing suit. 🕺
+- [`<mux-video>`](https://github.com/muxinc/elements/tree/main/packages/mux-video) A Mux-flavored HTML5 video element w/ hls.js and Mux data builtin.
+- [`<videojs-video>`](https://github.com/luwes/videojs-video-element) A web component for Video.js.
+- [`<wistia-video>`](https://github.com/luwes/wistia-video-element) A web component for the Wistia player.
+- [`<jwplayer-video>`](https://github.com/luwes/jwplayer-video-element) A web component for the JW player.
+- [`<hls-video>`](https://github.com/muxinc/hls-video-element) A web component for playing HTTP Live Streaming (HLS) videos.
+- [`castable-video`](https://github.com/muxinc/castable-video) Cast your video element to the big screen with ease!
+- [`<mux-player>`](https://github.com/muxinc/elements/tree/main/packages/mux-player) The official Mux-flavored video player web component.

index.html

@@ -0,0 +1,115 @@
+<html>
+  <head>
+    <title>&lt;vimeo-video&gt;</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css"
+    />
+    <style>
+      body {
+        min-height: 80%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+      }
+      media-controller:not([audio]) {
+        display: block;         /* expands the container if preload=none */
+        max-width: 640px;       /* allows the container to shrink if small */
+        aspect-ratio: 16 / 9;   /* set container aspect ratio if preload=none */
+        width: 100%;
+      }
+      vimeo-video {
+        width: 100%;
+        aspect-ratio: 16 / 9;
+        background: #000;
+      }
+    </style>
+
+    <script type="module" src="./dist/vimeo-video-element.js"></script>
+    <script type="module" src="https://unpkg.com/media-chrome"></script>
+  </head>
+  <body>
+    <h1>&lt;vimeo-video&gt;</h1>
+    <br />
+
+    <media-controller id="controller">
+      <vimeo-video
+        src="https://vimeo.com/648359100"
+        slot="media"
+        loop
+        muted
+        controls
+      ></vimeo-video>
+      <span slot="gestures-chrome"></span>
+      <media-loading-indicator media-loading slot="centered-chrome" no-auto-hide></media-loading-indicator>
+    </media-controller>
+
+    <br>
+
+    <media-control-bar media-controller="controller">
+      <media-play-button></media-play-button>
+      <media-mute-button></media-mute-button>
+      <media-volume-range></media-volume-range>
+      <media-seek-backward-button></media-seek-backward-button>
+      <media-seek-forward-button></media-seek-forward-button>
+      <media-time-range></media-time-range>
+      <media-time-display remaining show-duration></media-time-display>
+      <media-playback-rate-button></media-playback-rate-button>
+      <media-fullscreen-button></media-fullscreen-button>
+    </media-control-bar>
+
+    <br>
+
+    <button id="loadbtn">Load new clip</button>
+
+    <script>
+      const video = document.querySelector('vimeo-video');
+
+      loadbtn.onclick = () => {
+        video.src = 'https://vimeo.com/638371504';
+      }
+
+      video.addEventListener('play', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('waiting', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('playing', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('pause', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('seeking', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('seeked', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('ended', (e) => {
+        console.log(e.type);
+      });
+
+      video.addEventListener('durationchange', (e) => {
+        console.log(e.type, video.duration);
+      });
+
+      video.addEventListener('volumechange', (e) => {
+        console.log(e.type, video.volume);
+      });
+
+      video.addEventListener('resize', (e) => {
+        console.log(e.type, video.videoWidth, video.videoHeight);
+      });
+    </script>
+  </body>
+</html>