Merge pull request #41 from taj54/main

chore: improve CI/CD and formatting

Author: taj54

.github/workflows/release.yml

@@ -1,5 +1,5 @@
-name: Publish to npm 
-      
+name: Publish to npm
+
 on:
   release:
     types: [created]

.github/workflows/tag-after-merge.yml

@@ -67,7 +67,7 @@ jobs:
         run: |
           # Match lines starting with "## vX.Y.Z " until the next "## "
           awk "/^## v${{ env.version }}[[:space:]]/{flag=1; next} /^## /{flag=0} flag" CHANGELOG.md > RELEASE_NOTES.md
-        
+
           echo "notes<<EOF" >> $GITHUB_ENV
           if [ "${{ env.release_type }}" = "major" ]; then
             echo "## 🚀 Major Release" >> $GITHUB_ENV
@@ -83,7 +83,7 @@ jobs:
         uses: softprops/action-gh-release@v2
         with:
           tag_name: v${{ env.version }}
-          name: "Release v${{ env.version }}"
+          name: 'Release v${{ env.version }}'
           body: ${{ env.notes }}
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/version-bump.yaml renamed to .github/workflows/version-bump.yml

@@ -17,8 +17,6 @@ on:
           - minor
           - major
 
-
-
 jobs:
   bump:
     runs-on: ubuntu-latest

.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2,
+  "ignores": ["node_modules", "dist"]
+}

CHANGELOG.md

@@ -5,23 +5,22 @@ 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
 
 ## 0.1.0 - 2025-08-09
 
 ### Features
 
-* `6b37d3b` feat: Add MIT license to build output and refactor component structure
-* `d44a709` feat: Refine target element mounting and bump version
-* `b89538d` feat: Allow specifying targetElementId for player mounting
-* `d1888ea` feat: Improve player initialization and build output
+- `6b37d3b` feat: Add MIT license to build output and refactor component structure
+- `d44a709` feat: Refine target element mounting and bump version
+- `b89538d` feat: Allow specifying targetElementId for player mounting
+- `d1888ea` feat: Improve player initialization and build output
 
 ### Chores
 
-* `11e7138` chore: Bump package version to `0.1.0` to reflect the new feature and breaking change in rendering behavior.
-* `e919430` chore: Update examples/ExampleInteractiveVideo.vue
-* `47f4db5` chore: Update examples/package.json
+- `11e7138` chore: Bump package version to `0.1.0` to reflect the new feature and breaking change in rendering behavior.
+- `e919430` chore: Update examples/ExampleInteractiveVideo.vue
+- `47f4db5` chore: Update examples/package.json
 
 ## 0.0.2 - 2025-08-05
 

CODE_OF_CONDUCT.md

@@ -10,19 +10,19 @@ We pledge to act and interact in ways that contribute to an open, welcoming, div
 
 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, and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall community
+- 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 overall community
 
 Examples of unacceptable behavior include:
 
-* 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 address, without their explicit permission
-* Other conduct which can reasonably be considered inappropriate in a professional setting
+- 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 address, without their explicit permission
+- Other conduct which can reasonably be considered inappropriate in a professional setting
 
 ## Enforcement Responsibilities
 
@@ -67,4 +67,4 @@ Community leaders will follow these Community Impact Guidelines in determining t
 This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.1, available at [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
 
 [homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html

CONTRIBUTING.md

@@ -28,20 +28,20 @@ This project adheres to the [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md). By partici
 
 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.).
+- 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.
+- 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
 
@@ -68,9 +68,9 @@ If you're looking to make your first code contribution, look for issues labeled
 
 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.
+- 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
 
@@ -82,18 +82,18 @@ For detailed instructions on setting up your development environment, installing
 
 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`
+- `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.
+- 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
 

DEVELOPER.md

@@ -7,6 +7,7 @@ This document provides essential information for developers looking to contribut
 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
@@ -26,35 +27,35 @@ To get started with local development, follow these steps:
 
 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.
+- **`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
-    ```
+  ```bash
+  pnpm build
+  ```
 
--   **`pnpm dev`**: Starts the TypeScript compiler in watch mode, recompiling files on changes. Useful for active development.
+- **`pnpm dev`**: Starts the TypeScript compiler in watch mode, recompiling files on changes. Useful for active development.
 
-    ```bash
-    pnpm dev
-    ```
+  ```bash
+  pnpm dev
+  ```
 
--   **`pnpm test`**: Runs the unit tests using Vitest.
+- **`pnpm test`**: Runs the unit tests using Vitest.
 
-    ```bash
-    pnpm test
-    ```
+  ```bash
+  pnpm test
+  ```
 
--   **`pnpm clean`**: Removes the `dist` directory, clearing all compiled output.
+- **`pnpm clean`**: Removes the `dist` directory, clearing all compiled output.
 
-    ```bash
-    pnpm clean
-    ```
+  ```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`.
+- **`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
-    ```
+  ```bash
+  pnpm prepare
+  ```
 
 ## Testing
 

README.md

@@ -1,4 +1,5 @@
 # @interactive-video-labs/vue
+
 <p align="center">
   <img src="https://raw.githubusercontent.com/interactive-video-labs/docs/main/logo.svg" width="200px" alt="Interactive Video Labs Logo" />
 </p>
@@ -84,15 +85,15 @@ function handleAnalyticsEvent(event, payload) {
 
 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').                                                |
+| 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.
 
@@ -147,10 +148,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <InteractiveVideo
-    ref="videoPlayer"
-    video-url="https://example.com/my-video.mp4"
-  />
+  <InteractiveVideo ref="videoPlayer" video-url="https://example.com/my-video.mp4" />
 </template>
 ```
 
@@ -161,10 +159,11 @@ onMounted(() => {
 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.
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.

eslint.config.mjs

@@ -0,0 +1,43 @@
+import { defineConfig } from 'eslint/config';
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import prettier from 'eslint-plugin-prettier';
+import tsParser from '@typescript-eslint/parser';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import js from '@eslint/js';
+import { FlatCompat } from '@eslint/eslintrc';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default defineConfig([
+  {
+    ignores: ['node_modules/*', 'dist/*', 'examples/*', 'scripts/*', 'test/*'],
+  },
+  {
+    extends: compat.extends(
+      'eslint:recommended',
+      'plugin:@typescript-eslint/recommended',
+      'prettier',
+    ),
+
+    plugins: {
+      '@typescript-eslint': typescriptEslint,
+      prettier,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    rules: {
+      ...typescriptEslint.configs.recommended.rules,
+      'prettier/prettier': 'error',
+    },
+  },
+]);