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 @@
-
+
@@ -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
+
+
+
+