diff --git a/CHANGELOG.md b/CHANGELOG.md index e69de29..c13aa52 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -0,0 +1,37 @@ +# CHANGELOG + +All notable changes to this project will be documented in this file. + +The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), +and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + + +## Unreleased + +### Added + +### Changed + +### Deprecated + +### Removed + +### Fixed + +### Security + +## 0.0.2 - 2025-08-05 + +### Added + +- Comprehensive project documentation (README.md, DEVELOPER.md, CONTRIBUTING.md). +- Initial CHANGELOG.md. + +## 0.0.1 - 2025-08-05 + +### Added + +- Initial release of `@interactive-video-labs/vue`. +- Vue 3 wrapper for `@interactive-video-labs/core`. +- Component for interactive video playback with cue point and translation support. +- Basic analytics event handling. diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index e69de29..95d33af 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -0,0 +1,100 @@ +# CONTRIBUTING.md + +We welcome contributions to `@interactive-video-labs/vue`! Your help is greatly appreciated in making this project better. + +Before contributing, please take a moment to review this document. It outlines the guidelines for contributing to this repository. + +## Table of Contents + +- [Code of Conduct](#code-of-conduct) +- [How Can I Contribute?](#how-can-i-contribute) + - [Reporting Bugs](#reporting-bugs) + - [Suggesting Enhancements](#suggesting-enhancements) + - [Your First Code Contribution](#your-first-code-contribution) + - [Pull Requests](#pull-requests) +- [Development Setup](#development-setup) +- [Styleguides](#styleguides) + - [Git Commit Messages](#git-commit-messages) + - [TypeScript Styleguide](#typescript-styleguide) +- [License](#license) + +## Code of Conduct + +This project adheres to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. Please report unacceptable behavior to [insert contact email or method here, e.g., `support@example.com`]. + +## How Can I Contribute? + +### Reporting Bugs + +If you find a bug, please open an issue on our [GitHub Issues page](https://github.com/interactive-video-labs/interactive-video-vue-wrapper/issues). When reporting a bug, please include: + +- A clear and concise description of the bug. +- Steps to reproduce the behavior. +- Expected behavior. +- Actual behavior. +- Screenshots or videos if applicable. +- Your environment (Vue version, browser, OS, etc.). + +### Suggesting Enhancements + +If you have an idea for a new feature or an improvement, please open an issue on our [GitHub Issues page](https://github.com/interactive-video-labs/interactive-video-vue-wrapper/issues). When suggesting an enhancement, please include: + +- A clear and concise description of the proposed enhancement. +- The problem it solves or the benefit it provides. +- Any alternative solutions you've considered. + +### Your First Code Contribution + +If you're looking to make your first code contribution, look for issues labeled `good first issue` on our [GitHub Issues page](https://github.com/interactive-video-labs/interactive-video-vue-wrapper/issues). + +### Pull Requests + +1. **Fork the repository** and clone it to your local machine. +2. **Create a new branch** from `main` for your changes: + ```bash + git checkout -b feature/your-feature-name + # or + git checkout -b bugfix/your-bug-fix-name + ``` +3. **Make your changes** and ensure they adhere to the project's [Styleguides](#styleguides). +4. **Write tests** for your changes, if applicable. Ensure all existing tests pass. +5. **Run the build** to ensure everything compiles correctly: + ```bash + pnpm build + ``` +6. **Commit your changes** using a descriptive commit message (see [Git Commit Messages](#git-commit-messages)). +7. **Push your branch** to your forked repository. +8. **Open a Pull Request** to the `main` branch of the original repository. + +In your pull request description, please: + +- Reference any related issues (e.g., `Fixes #123`, `Closes #456`). +- Provide a clear explanation of your changes. +- Include screenshots or GIFs if your changes affect the UI. + +## Development Setup + +For detailed instructions on setting up your development environment, installing dependencies, and running tests, please refer to the [DEVELOPER.md](DEVELOPER.md) file. + +## Styleguides + +### Git Commit Messages + +We follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) specification for our commit messages. This helps with automated changelog generation and semantic versioning. Examples: + +- `feat: add new video playback controls` +- `fix: resolve autoplay issue on iOS` +- `docs: update installation instructions` +- `refactor: improve player initialization logic` +- `test: add unit tests for cue points` + +### TypeScript Styleguide + +- Follow existing code style and formatting. +- Use clear and descriptive variable and function names. +- Ensure proper type annotations for all functions, variables, and parameters. +- Avoid `any` type unless absolutely necessary. + +## License + +By contributing to `@interactive-video-labs/vue`, you agree that your contributions will be licensed under its MIT License. See the [LICENSE](LICENSE) file for details. diff --git a/DEVELOPER.md b/DEVELOPER.md index e69de29..2fcb849 100644 --- a/DEVELOPER.md +++ b/DEVELOPER.md @@ -0,0 +1,79 @@ +# DEVELOPER.md + +This document provides essential information for developers looking to contribute to or work on the `@interactive-video-labs/vue` project. + +## Project Setup + +To get started with local development, follow these steps: + +1. **Clone the repository:** + ```bash + git clone https://github.com/interactive-video-labs/interactive-video-vue-wrapper.git + cd interactive-video-vue-wrapper + ``` + +2. **Install dependencies:** + This project uses `pnpm` as its package manager. If you don't have `pnpm` installed, you can install it globally: + ```bash + npm install -g pnpm + ``` + Then, install the project dependencies: + ```bash + pnpm install + ``` + +## Available Scripts + +Here are the common development scripts available: + +- **`pnpm build`**: Compiles the TypeScript source code into JavaScript (ESM and CommonJS formats) and generates declaration files (`.d.ts`). This command is run before publishing. + + ```bash + pnpm build + ``` + +- **`pnpm dev`**: Starts the TypeScript compiler in watch mode, recompiling files on changes. Useful for active development. + + ```bash + pnpm dev + ``` + +- **`pnpm test`**: Runs the unit tests using Vitest. + + ```bash + pnpm test + ``` + +- **`pnpm clean`**: Removes the `dist` directory, clearing all compiled output. + + ```bash + pnpm clean + ``` + +- **`pnpm prepare`**: This script is typically run after `pnpm install` and before `pnpm publish`. In this project, it simply runs `pnpm build`. + + ```bash + pnpm prepare + ``` + +## Testing + +Tests are written using [Vitest](https://vitest.dev/). You can run all tests with: + +```bash +pnpm test +``` + +Test files are located in the `test/` directory and follow the naming convention `*.test.ts`. + +## Code Style and Linting + +This project uses TypeScript. Ensure your code adheres to the existing style and type conventions. While there isn't an explicit linting script defined in `package.json`, it's good practice to follow consistent formatting and coding standards. + +## Release Process + +This project uses an automated release workflow via GitHub Actions (`.github/workflows/release.yml`). Releases are typically triggered by pushing tags or by manual dispatch. Refer to the workflow file for details on how new versions are published. + +## Contributing + +We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) file for detailed guidelines on how to submit issues, propose features, and make pull requests. diff --git a/README.md b/README.md index 513fdff..1f178ce 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@

NPM Version NPM License - NPM Downloads + NPM Downloads Build Status @@ -16,3 +16,155 @@ Welcome to `@interactive-video-labs/vue` — a lightweight Vue 3 wrapper around This wrapper enables seamless integration of interactive video players into Vue applications using idiomatic Vue components and bindings, while staying close to the underlying core engine API. --- + +## Features + +- **Declarative Props**: Control the player via reactive Vue props. +- **Event Handling**: Listen to player events using a simple `onAnalyticsEvent` callback. +- **Dynamic Content**: Update cue points and translations on the fly. +- **Direct Player Access**: Get direct access to the underlying `@interactive-video-labs/core` player instance. +- **TypeScript Support**: Fully typed for a better development experience. + +## Installation + +Install the package and its peer dependencies using your favorite package manager: + +```bash +# With pnpm +pnpm add @interactive-video-labs/vue @interactive-video-labs/core vue + +# With npm +npm install @interactive-video-labs/vue @interactive-video-labs/core vue + +# With yarn +yarn add @interactive-video-labs/vue @interactive-video-labs/core vue +``` + +## Basic Usage + +Here's a simple example of how to use the `InteractiveVideo` component in your Vue 3 application. + +```vue + + + +``` + +## API Reference + +### Props + +The component accepts the following props: + +| Prop | Type | Required | Default | Description | +| -------------------- | -------------------------------------------------------- | -------- | ----------- | ------------------------------------------------------------------------------------------------------- | +| `videoUrl` | `string` | `true` | - | The URL of the video to be loaded. | +| `cues` | `CuePoint[]` | `false` | `[]` | An array of cue points for interactive events. Can be updated dynamically. | +| `translations` | `Translations` | `false` | `{}` | An object containing translations for the player UI. | +| `onAnalyticsEvent` | `(event: AnalyticsEvent, payload?: AnalyticsPayload) => void` | `false` | - | Callback function for analytics events emitted by the player. | +| `autoplay` | `boolean` | `false` | `false` | Whether the video should start playing automatically. | +| `loop` | `boolean` | `false` | `false` | Whether the video should loop. | +| `locale` | `string` | `false` | `'en'` | The locale to be used for the player (e.g., 'en', 'es'). | + +Any additional attributes passed to the component will be forwarded to the underlying `@interactive-video-labs/core` player configuration. + +### Events + +Player events are emitted through the `onAnalyticsEvent` prop. + +**Available Events:** + +- `PLAYER_LOADED` +- `VIDEO_STARTED` +- `VIDEO_PAUSED` +- `VIDEO_ENDED` +- `CUE_TRIGGERED` +- `INTERACTION_COMPLETED` +- `ERROR` + +**Example:** + +```js +function handleAnalyticsEvent(event, payload) { + switch (event) { + case 'CUE_TRIGGERED': + console.log('A cue was triggered at:', payload.cue.time); + break; + case 'ERROR': + console.error('Player error:', payload.error); + break; + } +} +``` + +### Exposing the Player Instance + +If you need to call methods on the player instance directly, you can get a reference to it using a `ref` on the component. + +```vue + + + +``` + +--- + +## 🧑‍💻 For Developers + +For detailed development setup, project structure, testing, build, and publishing instructions, please refer to our [Developer Guide](DEVELOPER.md). + +--- +## Contributing + +Contributions are welcome! Please read our [Contributing Guidelines](CONTRIBUTING.md) to get started. + +## License + +This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details. \ No newline at end of file diff --git a/package.json b/package.json index 4a53f15..f31f283 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@interactive-video-labs/vue", - "version": "0.0.1", + "version": "0.0.2", "type": "module", "description": "Thin Vue wrapper for the @interactive-video-labs/core engine. Enables cue-based interactive video playback in Vue 3 applications.", "main": "dist/index.cjs",