chore: restructure project for simplicity

Author: mihar-22

.eslintrc.json

@@ -6,12 +6,6 @@
     "airbnb-typescript",
     "plugin:@stencil/recommended"
   ],
-  "ignorePatterns": [
-    "media/",
-    "packages/react/src/",
-    "packages/vue/src/",
-    "packages/angular/src/"
-  ],
   "rules": {
     "no-console": "off",
     "default-case": "off",

.github/workflows/release.yml

@@ -16,8 +16,10 @@ jobs:
           node-version: 14
       - name: Install pnpm
         run: curl -L https://raw.githubusercontent.com/pnpm/self-installer/master/install.js | node
-      - name: Install dependencies
-        run: pnpm install
+      - name: Install root dependencies
+        run: pnpm install --filter vime 
+      - name: Install core dependencies
+        run: pnpm install --filter @vime/core
       - name: Test
         run: pnpm run test:e2e.providers --filter @vime/core
   release:
@@ -32,8 +34,10 @@ jobs:
           node-version: 14
       - name: Install pnpm
         run: curl -L https://raw.githubusercontent.com/pnpm/self-installer/master/install.js | node
-      - name: Install dependencies
-        run: pnpm install
+      - name: Install root dependencies
+        run: pnpm install --filter vime 
+      - name: Install packages/* dependencies
+        run: pnpm install --filter ./packages
       - name: Test
         run: pnpm run test:ci --filter @vime/core
       - name: Coverage

.gitignore

@@ -33,6 +33,12 @@ pnpm-debug.log*
 chrome-profiler-events*.json
 speed-measure-plugin*.json
 
+packages/angular/src/directives/
+packages/react/src/components.ts
+packages/react/src/react-component-lib/
+packages/vue/src/components.ts
+packages/vue/src/vue-component-lib/
+
 /tmp
 /out-tsc
 /bazel-out

CHANGELOG.md

@@ -1,4 +1,4 @@
 # Changelog
 
-Automatically generated by [semantic-release](https://github.com/semantic-release/semantic-release) 
-and can be found on the [releases page](https://github.com/vime-js/vime/releases).
+Automatically generated by [semantic-release](https://github.com/semantic-release/semantic-release)
+and can be found on the [releases page](https://github.com/vime-js/vime/releases).

CODE_OF_CONDUCT.md

@@ -1,4 +1,3 @@
-
 # Contributor Covenant Code of Conduct
 
 ## Our Pledge
@@ -18,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -107,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

CONTRIBUTING.md

@@ -12,24 +12,24 @@
   alt="Vime 2 - Video Player Screenshot"
 />
 
-Vime is simply a collection of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) 
+Vime is simply a collection of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
 that enable you to easily build and customize your own media player.
 
 - 🖥  Responsive (mobile/desktop).
 - 👌  Touch input friendly.
-- 🎥  Multi-provider support (HTML5, HLS, YouTube, Vimeo etc.). 
+- 🎥  Multi-provider support (HTML5, HLS, YouTube, Vimeo etc.).
 - ♾️  Avoid cross-browser differences on media related APIs such as fullscreen and picture-in-picture.
-- 👐  [Accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) via ARIA 
-roles/states/properties and keyboard support.
+- 👐  [Accessible](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) via ARIA
+  roles/states/properties and keyboard support.
 - 🌎  I18N support.
 - 🎨  Style anything you want with [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 - 🏎️  Performant with [preconnections](https://css-tricks.com/using-relpreconnect-to-establish-network-connections-early-and-increase-performance) + [lazy loading](https://www.imperva.com/learn/performance/lazy-loading) of components and media out of the box.
 - ️🧰  Awesome default UI's for audio/video/live media on mobile and desktop.
 - 🛠  Comprehensive [player API](../components/core/player/readme.md).
 - 💪  Built with TypeScript so you can enjoy completely typed components.
-- 🏠  Feel right at home with HTML/CSS/JS thanks to web components. 
-- 🍽️  Serve it with your favourite framework whether it's React, Vue, Angular or whatever the cool 
-kids on the block use today.
+- 🏠  Feel right at home with HTML/CSS/JS thanks to web components.
+- 🍽️  Serve it with your favourite framework whether it's React, Vue, Angular or whatever the cool
+  kids on the block use today.
 
 🍭 Here's a few little bites of what you can do with Vime ...
 
@@ -39,13 +39,24 @@ kids on the block use today.
   <vime-video poster="/media/poster.png" cross-origin>
     <!-- Why `data-src`? Lazy loading. You can always use `src` if you don't need it. -->
     <source data-src="/media/video.mp4" type="video/mp4" />
-    <track default kind="subtitles" src="/media/subs/en.vtt" srclang="en" label="English" />
-    <track kind="subtitles" src="/media/subs/es.vtt" srclang="es" label="Spanish" />
+    <track
+      default
+      kind="subtitles"
+      src="/media/subs/en.vtt"
+      srclang="en"
+      label="English"
+    />
+    <track
+      kind="subtitles"
+      src="/media/subs/es.vtt"
+      srclang="es"
+      label="Spanish"
+    />
   </vime-video>
 </vime-player>
 ```
 
-*Custom UI?*
+_Custom UI?_
 
 ```html
 <!-- Lets add a little splash of color throughout the player. -->
@@ -77,7 +88,7 @@ kids on the block use today.
 </vime-player>
 ```
 
-*In a hurry?*
+_In a hurry?_
 
 ```html
 <!-- Light themed audio player. -->
@@ -99,9 +110,9 @@ There are framework specific bindings for:
 - [Vue](https://vuejs.org)
 - [Angular](https://angular.io)
 
-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 
-[here](https://custom-elements-everywhere.com/) if your framework has complete support for 
+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
+[here](https://custom-elements-everywhere.com/) if your framework has complete support for
 web components.
 
 There are also [examples](./examples) for loading and using Vime with:
@@ -114,8 +125,8 @@ There are also [examples](./examples) for loading and using Vime with:
 
 ## 🖥️ Browsers
 
-Vime is forward thinking and built for the modern web. All 
-[ES6 Compatible](https://caniuse.com/#feat=es6-module) browsers are supported, some of which are 
+Vime is forward thinking and built for the modern web. All
+[ES6 Compatible](https://caniuse.com/#feat=es6-module) browsers are supported, some of which are
 listed below.
 
 - Edge 79+
@@ -138,16 +149,16 @@ listed below.
 
 Documentation can be found at [https://vimejs.com](https://vimejs.com).
 
-❓ *Looking for V1 docs? -> https://v1.vimejs.com*
+❓ _Looking for V1 docs? -> https://v1.vimejs.com_
 
 ## 🙋 Support
 
-Feel free to join our [Discord channel][discord] if you'd like help with anything related to Vime. 
+Feel free to join our [Discord channel][discord] if you'd like help with anything related to Vime.
 Please remember to be respectful and patient as this is a community driven project.
 
 ## 🔨 Contributing
 
-If you'd like to contribute and help in building a better media player for the web, then everything 
+If you'd like to contribute and help in building a better media player for the web, then everything
 you need to get started can be found in the [Contributing Guide](./CONTRIBUTING.md).
 
 ## ❤️ Sponsors
@@ -179,4 +190,4 @@ A huge thanks to our sponsors who support open-source projects like Vime.
 [mdn-media-element]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement
 [youtube]: https://developers.google.com/youtube/iframe_api_reference
 [vimeo]: https://developer.vimeo.com/player/sdk
-[dailymotion]: https://developer.dailymotion.com/player
+[dailymotion]: https://developer.dailymotion.com/player

README.md

@@ -0,0 +1,31 @@
+# @vime/docs
+
+Vime is simply a collection of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
+that help you easily build and customize your our own media player. This package contains the source
+code for the Vime documentation site hosted at https://vimejs.com. The website is built using
+[Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+
+### Local Development
+
+```bash
+$: npm install
+
+$: npm run start
+```
+
+This command starts a local development server and opens up a browser window. Most changes are
+reflected live without having to restart the server.
+
+It's important to note that **`docs/components` is autogenerated** by `@vime/core`. If you'd like
+to update those docs run the following commands:
+
+```bash
+$: cd ..
+
+$: npm run setup
+
+$: cd packages/core
+
+# Update the docs inside `src/components` and then run:
+$: npm run build
+```

docs/README.md

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
+};

docs/babel.config.js

@@ -0,0 +1,79 @@
+---
+title: vime-embed
+sidebar_label: Embed
+slug: api
+---
+
+Embeds an external media player and enables interacting with it via `postMessage`.
+
+## Example
+
+```html
+<vime-embed
+  embed-src="https://www.youtube-nocookie.com/embed/DyTCOwB0DVw"
+  media-title="Agent 327: Operation Barbershop"
+  origin="https://www.youtube-nocookie.com"
+/>
+
+<script>
+  const embed = document.querySelector("vime-embed");
+  embed.params = { autoplay: 1, muted: 1, controls: 0 };
+  embed.addEventListener("vEmbedMessage", (e) => {
+    const message = e.detail;
+    console.log(message);
+  });
+</script>
+```
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Property         | Attribute     | Description                                                                                                                     | Type                                                              | Default     |
+| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ----------- |
+| `decoder`        | --            | A function which accepts the raw message received from the embedded media player via `postMessage` and converts it into a POJO. | `((data: string) => Record<string, any> ∣ undefined) ∣ undefined` | `undefined` |
+| `embedSrc`       | `embed-src`   | A URL that will load the external player and media (Eg: https://www.youtube.com/embed/DyTCOwB0DVw).                             | `string`                                                          | `''`        |
+| `mediaTitle`     | `media-title` | The title of the current media so it can be set on the inner `iframe` for screen readers.                                       | `string`                                                          | `''`        |
+| `origin`         | `origin`      | Where the src request had originated from without any path information.                                                         | `string ∣ undefined`                                              | `undefined` |
+| `params`         | --            | The parameters to pass to the embedded player. These are encoded as a query string and appended to the `embedSrc` prop.         | `{ [x: string]: any; }`                                           | `{}`        |
+| `preconnections` | --            | A collection of URLs to that the browser should immediately start establishing a connection with.                               | `string[]`                                                        | `[]`        |
+
+## Events
+
+| Event             | Description                                                                                                                                        | Type                  |
+| ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
+| `vEmbedLoaded`    | Emitted when the embedded player and any new media has loaded.                                                                                     | `CustomEvent<void>`   |
+| `vEmbedMessage`   | Emitted when a new message is received from the embedded player via `postMessage`.                                                                 | `CustomEvent<any>`    |
+| `vEmbedSrcChange` | Emitted when the `embedSrc` or `params` props change. The payload contains the `params` serialized into a query string and appended to `embedSrc`. | `CustomEvent<string>` |
+
+## Methods
+
+### `postMessage(message: any, target?: string | undefined) => Promise<void>`
+
+Posts a message to the embedded media player.
+
+#### Returns
+
+Type: `Promise<void>`
+
+## Dependencies
+
+### Used by
+
+- [vime-dailymotion](../../providers/dailymotion/readme.md)
+- [vime-vimeo](../../providers/vimeo/readme.md)
+- [vime-youtube](../../providers/youtube/readme.md)
+
+### Graph
+
+```mermaid
+graph TD;
+  vime-dailymotion --> vime-embed
+  vime-vimeo --> vime-embed
+  vime-youtube --> vime-embed
+  style vime-embed fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+---
+
+_Built with [StencilJS](https://stenciljs.com/)_