Merge pull request #39 from taj54/main

chore: improve release and CI workflows

Author: taj54

.github/workflows/release.yml

@@ -36,4 +36,3 @@ jobs:
         run: pnpm publish --access public --no-git-checks
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-

.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

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

@@ -4,11 +4,11 @@
 
 ### Features
 
-*   Add Vitest test for InteractiveVideoComponent (3c5c55b)
-*   Add Angular wrapper for interactive video player (480f53c)
+- Add Vitest test for InteractiveVideoComponent (3c5c55b)
+- Add Angular wrapper for interactive video player (480f53c)
 
 ### Documentation
 
-*   Add DEVELOPER.md for project setup and development (f13178f)
-*   Add README.md for interactive-video-angular-wrapper (9383cce)
-*   Add CONTRIBUTING.md for Angular wrapper (0f19b25)
+- Add DEVELOPER.md for project setup and development (f13178f)
+- Add README.md for interactive-video-angular-wrapper (9383cce)
+- Add CONTRIBUTING.md for Angular wrapper (0f19b25)

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

@@ -30,20 +30,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-angular-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 (Angular 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 (Angular 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-angular-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
 
@@ -70,9 +70,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
 
@@ -84,18 +84,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

@@ -20,16 +20,17 @@ This document provides detailed instructions for developers who want to set up,
 
 Before you begin, ensure you have the following installed:
 
--   **Node.js**: Version 18 or higher. You can download it from [nodejs.org](https://nodejs.org/).
--   **pnpm**: Our preferred package manager. If you don't have it, install it globally:
-    ```bash
-    npm install -g pnpm
-    ```
-    Alternatively, you can use `npm` or `yarn`, but `pnpm` is recommended for consistent dependency management.
+- **Node.js**: Version 18 or higher. You can download it from [nodejs.org](https://nodejs.org/).
+- **pnpm**: Our preferred package manager. If you don't have it, install it globally:
+  ```bash
+  npm install -g pnpm
+  ```
+  Alternatively, you can use `npm` or `yarn`, but `pnpm` is recommended for consistent dependency management.
 
 ## Getting Started
 
 1.  **Clone the repository:**
+
     ```bash
     git clone https://github.com/interactive-video-labs/interactive-video-angular-wrapper.git
     cd interactive-video-angular-wrapper
@@ -43,14 +44,14 @@ Before you begin, ensure you have the following installed:
 
 ## Project Structure
 
--   `src/`: Contains the source code for the Angular wrapper component.
-    -   `index.ts`: The main entry point for the library, exporting `InteractiveVideoComponent` and related types.
--   `test/`: Contains unit tests for the components.
-    -   `interactive-video.test.ts`: Tests for the `InteractiveVideoComponent`.
--   `dist/`: (Generated after build) Contains the compiled output of the library (ESM, CJS, and declaration files).
--   `examples/`: Contains example usage of the Angular wrapper.
--   `tsup.config.ts`: Configuration for `tsup`, used to bundle the TypeScript library.
--   `vitest.config.ts`: Configuration for `Vitest`, our testing framework.
+- `src/`: Contains the source code for the Angular wrapper component.
+  - `index.ts`: The main entry point for the library, exporting `InteractiveVideoComponent` and related types.
+- `test/`: Contains unit tests for the components.
+  - `interactive-video.test.ts`: Tests for the `InteractiveVideoComponent`.
+- `dist/`: (Generated after build) Contains the compiled output of the library (ESM, CJS, and declaration files).
+- `examples/`: Contains example usage of the Angular wrapper.
+- `tsup.config.ts`: Configuration for `tsup`, used to bundle the TypeScript library.
+- `vitest.config.ts`: Configuration for `Vitest`, our testing framework.
 
 ## Development Scripts
 
@@ -102,7 +103,7 @@ Removes the `dist/` directory, effectively cleaning up all compiled output.
 
 ## Troubleshooting
 
--   **`pnpm install` fails**: Ensure you have Node.js and pnpm installed correctly. Check your internet connection.
--   **Build errors**: Verify that all dependencies are installed (`pnpm install`) and that your TypeScript code has no compilation errors.
--   **Tests failing**: Run `pnpm test` to see detailed error messages. Ensure your changes haven't introduced regressions.
--   **Peer dependency issues**: If you encounter issues related to `@angular/core` or `@angular/common`, ensure that the versions installed in your consuming application match the peer dependency ranges specified in `package.json` (`^15.0.0 || ^16.0.0 || ^17.0.0`).
+- **`pnpm install` fails**: Ensure you have Node.js and pnpm installed correctly. Check your internet connection.
+- **Build errors**: Verify that all dependencies are installed (`pnpm install`) and that your TypeScript code has no compilation errors.
+- **Tests failing**: Run `pnpm test` to see detailed error messages. Ensure your changes haven't introduced regressions.
+- **Peer dependency issues**: If you encounter issues related to `@angular/core` or `@angular/common`, ensure that the versions installed in your consuming application match the peer dependency ranges specified in `package.json` (`^15.0.0 || ^16.0.0 || ^17.0.0`).

README.md

@@ -63,9 +63,7 @@ import { InteractiveVideoComponent } from '@interactive-video-labs/angular';
   selector: 'app-my-component',
   standalone: true,
   imports: [InteractiveVideoComponent],
-  template: `
-    <iv-interactive-video videoUrl="your-video-url.mp4"></iv-interactive-video>
-  `,
+  template: ` <iv-interactive-video videoUrl="your-video-url.mp4"></iv-interactive-video> `,
 })
 export class MyComponent {}
 ```
@@ -132,7 +130,11 @@ export class TranslationExampleComponent {
 
 ```typescript
 import { Component } from '@angular/core';
-import { InteractiveVideoComponent, AnalyticsEvent, AnalyticsPayload } from '@interactive-video-labs/angular';
+import {
+  InteractiveVideoComponent,
+  AnalyticsEvent,
+  AnalyticsPayload,
+} from '@interactive-video-labs/angular';
 
 @Component({
   selector: 'app-analytics-example',
@@ -170,21 +172,21 @@ You can mount the player to an existing HTML element by providing its ID to the
 
 ### Inputs
 
-| Name            | Type                                     | Description                                                               | Default     | Required |
-| :-------------- | :--------------------------------------- | :------------------------------------------------------------------------ | :---------- | :------- |
-| `videoUrl`      | `string`                                 | The URL of the video to be loaded.                                        | `undefined` | Yes      |
-| `cues`          | `CuePoint[]`                             | An array of cue points for interactive events.                            | `undefined` | No       |
-| `translations`  | `Translations`                           | An object containing translations for the player.                         | `undefined` | No       |
-| `autoplay`      | `boolean`                                | Whether the video should start playing automatically.                     | `false`     | No       |
-| `loop`          | `boolean`                                | Whether the video should loop.                                            | `false`     | No       |
-| `locale`        | `string`                                 | The locale to be used for the player.                                     | `'en'`      | No       |
-| `targetElementId` | `string`                                 | The ID of an external HTML element where the player will be mounted.      | `undefined` | No       |
+| Name              | Type           | Description                                                          | Default     | Required |
+| :---------------- | :------------- | :------------------------------------------------------------------- | :---------- | :------- |
+| `videoUrl`        | `string`       | The URL of the video to be loaded.                                   | `undefined` | Yes      |
+| `cues`            | `CuePoint[]`   | An array of cue points for interactive events.                       | `undefined` | No       |
+| `translations`    | `Translations` | An object containing translations for the player.                    | `undefined` | No       |
+| `autoplay`        | `boolean`      | Whether the video should start playing automatically.                | `false`     | No       |
+| `loop`            | `boolean`      | Whether the video should loop.                                       | `false`     | No       |
+| `locale`          | `string`       | The locale to be used for the player.                                | `'en'`      | No       |
+| `targetElementId` | `string`       | The ID of an external HTML element where the player will be mounted. | `undefined` | No       |
 
 ### Outputs
 
-| Name             | Type                                                               | Description                                     |
-| :--------------- | :----------------------------------------------------------------- | :---------------------------------------------- |
-| `analyticsEvent` | `EventEmitter<[event: AnalyticsEvent, payload?: AnalyticsPayload]>` | Emits analytics events from the player.         |
+| Name             | Type                                                                | Description                             |
+| :--------------- | :------------------------------------------------------------------ | :-------------------------------------- |
+| `analyticsEvent` | `EventEmitter<[event: AnalyticsEvent, payload?: AnalyticsPayload]>` | Emits analytics events from the player. |
 
 ## Development
 

eslint.config.mjs

@@ -0,0 +1,52 @@
+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/*',
+      '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',
+    },
+  },
+]);