feat: standalone version

Author: orizens

CHANGELOG.md

@@ -1,4 +1,8 @@
 
+## v 17.1.0 (2024/06/20)
+
+- [NEW] - now using standalone component (not module)
+
 ## v 17.0.0 (2024/06/20)
 
 - upgrade - bump to version 17

README.md

@@ -1,4 +1,4 @@
-[![Build Status](https://travis-ci.org/orizens/ngx-youtube-player.svg?branch=master)](https://travis-ci.org/orizens/ngx-youtube-player)
+
 [![npm version](https://badge.fury.io/js/ngx-youtube-player.svg)](https://badge.fury.io/js/ngx-youtube-player)
 [![npm downloads a month](https://img.shields.io/npm/dm/ngx-youtube-player.svg)](https://img.shields.io/npm/dm/ngx-youtube-player.svg)
 [![npm downloads a week](https://img.shields.io/npm/dt/ngx-youtube-player.svg)](https://img.shields.io/npm/dt/ngx-youtube-player.svg)
@@ -7,36 +7,33 @@
 
 `npm i ngx-youtube-player`
 
-# Angular Youtube Player Component
+# Angular Youtube Player Component (Standalone)
 
 This is an Angular component based on [youtube player iframe api](https://developers.google.com/youtube/iframe_api_reference).
 This component came out as a result of the [open source project Echoes Player](http://github.com/orizens/echoes-player) - an alternative player for watching and listening to media from youtube.
 
-## Breaking Change with v7
+## Breaking Change with v17
 
-| Before < v7           | After >= v7                        |
+| Before < v17           | After >= v17.1.0                        |
 | --------------------- | ---------------------------------- |
-| `YoutubePlayerModule` | `NgxYoutubePlayerModule`           |
-| `YoutubePlayerModule` | `NgxYoutubePlayerModule.forRoot()` |
+| `YoutubePlayerModule.forRoot()` | as standalone version           |
 
 ## Angular Support
 
-**Starting with version 6**, versions follow Angular's version to easily reflect compatibility.
-
-Meaning, for Angular 11, use ngx-youtube-player @ ^11.0.0
+**Starting with version 17.1.0**, `YoutubePlayerComponent` is a standalone component
 
 ## LICENSE
 
 Angular Youtube Component includes 2 optional licenses:
 
-1.  **Free** - for open source projects - includes standard play features, released under **MIT** license.
-2.  **Commercial (Enterprize)** - **you must purchase a license**, includes the following features:
+1. **Free** - for open source projects - includes standard play features, released under **MIT** license.
+2. **Commercial (Enterprize)** - **you must purchase a license**, includes the following features:
 
 - License types:
   - app developer (\$200) - a license for each developer working with this component for one product only
   - platform developer (\$550) - a license for each developer developer working with component for all products in one company
 
-To purchase a license, please contact at https://orizens.com/contact
+To purchase a license, please contact at <https://orizens.com/contact>
 
 ## Installation
 
@@ -66,20 +63,10 @@ Currently supported attributes:
 First, import the YoutubePlayerModule to your module:
 
 ```typescript
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { YoutubePlayerModule } from "ngx-youtube-player";
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppComponent } from "./app";
 
-@NgModule({
-  imports: [BrowserModule, YoutubePlayerModule.forRoot()],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-
-platformBrowserDynamic().bootstrapModule(AppModule);
+bootstrapApplication(AppComponent);
 ```
 
 Next, use the **youtube-player** component. A Unique Id will be created for this player's instance:
@@ -88,6 +75,7 @@ Next, use the **youtube-player** component. A Unique Id will be created for this
 import { Component } from "@angular/core";
 
 @Component({
+  standalone: true,
   selector: "app",
   template: `
     <youtube-player
@@ -96,6 +84,7 @@ import { Component } from "@angular/core";
       (change)="onStateChange($event)"
     ></youtube-player>
   `,
+  imports: [YoutubePlayerComponent]
 })
 export class AppComponent {
   player: YT.Player;
@@ -111,13 +100,11 @@ export class AppComponent {
 }
 ```
 
-## Testing
+## Testing (DISABLED)
 
 To start developing tdd/bdd style: `npm run dev`
 This will: compile ts files, watch for changes and start the test task. Whenever a ts file is changed, it will rerun the tests.
 
-Travis-ci is integrated
-
 # Showcase Examples
 
 - [Echoes Player](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-youtube-player",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -56,4 +56,4 @@
     "url": "https://github.com/orizens/ngx-youtube-player/issues"
   },
   "homepage": "https://github.com/orizens/ngx-youtube-player"
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-youtube-player",
-  "version": "17.0.0",
+  "version": "17.1.0",
   "author": "Oren Farhi (orizens.com)",
   "peerDependencies": {
     "@angular/common": "^17.0.0",

projects/ngx-youtube-player/package-lock.json

@@ -5,22 +5,22 @@ import {
   ElementRef,
   EventEmitter,
   Input,
-  OnChanges,
   Output,
   Renderer2,
-  SimpleChanges
 } from '@angular/core';
 import {
   YoutubePlayerService,
   defaultSizes
 } from './ngx-youtube-player.service';
 
 @Component({
+  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'youtube-player',
   template: `
     <div id="yt-player-ngx-component"></div>
-  `
+  `,
+  providers: [YoutubePlayerService],
 })
 export class YoutubePlayerComponent implements AfterContentInit {
   @Input() videoId = '';

projects/ngx-youtube-player/package.json

@@ -26,7 +26,7 @@ describe('YoutubePlayerService', () => {
       .createSpy('YTPlayer')
       .and.callFake((id: string, params: any) => params),
     PlayerState: 1
-  };
+  } as any;
 
   it('should create an instance of YoutubePlayerService', () => {
     const service = new YoutubePlayerService(zone);
@@ -47,7 +47,7 @@ describe('YoutubePlayerService', () => {
     const actual = service.api;
     spyOn(service.api, 'next');
     win()['onYouTubeIframeAPIReady']();
-    expect(service.api.next).toHaveBeenCalledWith(global['YT']);
+    expect(service.api.next).toHaveBeenCalledWith(global['YT'] as any);
   });
 
   it('should generate a unique id', () => {

projects/ngx-youtube-player/src/lib/ngx-youtube-player.component.ts

@@ -1,6 +1,6 @@
 import { Injectable, NgZone } from "@angular/core";
 import { ReplaySubject } from "rxjs";
-import { IPlayerApiScriptOptions, IPlayerOutputs, IPlayerSize } from "./models";
+import { IPlayerApiScriptOptions, IPlayerOutputs, IPlayerSize } from "./types";
 
 export function win() {
   return window;