fix(FEC-13340) SEO - remove the unnecessary config and change the cha…

…pters url logic (#5)

solves: FEC-13340

related PR: kaltura/kaltura-player-js#647

README.md

@@ -31,27 +31,29 @@ playkit-js-seo is written in [TypeScript] (`*.ts`) (strongly typed superset of E
 
 The plugin can be activated in two modes:
 
-### Basic Player Metadata (No Configuration Required)
+### Basic Mode
 In this mode, the SEO plugin will automatically generate structured data based on the basic video metadata, 
 including properties such as name, description, thumbnail URL, upload date, expiration date, and duration.
 
-- **This mode requires no additional configuration nor any additional dependency** and works out of the box.
+- **This mode requires no additional settings nor any additional dependency** and works out of the box.
 
-### Extra Data Mode
+### Enhanced Mode
 In this mode, the SEO plugin includes **Chapters** and **Transcript** properties in the structured data.
 **Chapters** enables key moments feature which is a way for users to navigate video segments like chapters in a book, 
 which can help users engage more deeply with your content. **Transcript** provides richer search results with relevant keywords
 This mode requires:
 
-- **baseSegmentsUrl configuration**. A URL that points to a specific segment(chapter) in the video corresponding to the time offset specified in the query parameter.
-   The clip URL must point to the same URL path as the video with additional query parameters that specify the time (see [here](https://github.com/kaltura/playkit-js-seo/blob/master/docs/guide.md#configuration) for more details).
-
-- Set the player's **'preload'** option in the playback config to **'auto'** (config.playback.preload = auto).
+- **'preload'** option must be set to **'auto'** in the playback config (config.playback.preload = auto).
 
 - **Cue Points Manager Dependency**: The plugin depends on the [Cue Points Manager plugin](https://github.com/kaltura/playkit-js-kaltura-cuepoints)
   to handle the cue points for chapters and transcript.
   Make sure the Cue Points Manager package is included and properly integrated into your application
-  and configurd in plugins section in player config.
+  and configured in plugins section in player config.
+
+in either case No Configuration Required
+
+**The Plugin will consistently and automatically strive to include the fullest range of available data (enhanced mode),
+contingent upon the presence of chapters and transcripts, and provided that the 'preload' mode is enabled.**
 
 ## Iframe embed VS Dynamic embed
 

demo/canary/index.html

@@ -25,9 +25,7 @@ <h1>Child(Player) Page</h1>
           preload: 'auto'
         },
         plugins: {
-          seo: {
-            baseSegmentsUrl: 'https://www.example.com/example?t='
-          },
+          seo: {},
           kalturaCuepoints: {}
         }
       };

demo/dev/index.html

@@ -25,9 +25,7 @@ <h1>Child(Player) Page</h1>
           preload: 'auto'
         },
         plugins: {
-          seo: {
-            baseSegmentsUrl: 'https://www.example.com/example?t='
-          },
+          seo: {},
           kalturaCuepoints: {}
         }
       };

docs/guide.md

@@ -34,17 +34,7 @@ const player = KalturaPlayer.setup(config);
 
 ### Configuration
 
-> The configuration is required only in [Extra Data Mode](https://github.com/kaltura/playkit-js-seo/blob/master/README.md#extra-data-mode)
-
-- **baseSegmentsUrl:**  A URL that points to a specific segment(chapter) in the video corresponding to the time offset specified in the query parameter.
-
-**The clip URL must point to the same URL path as the video!**
-
-For example, the following URL means the video starts at 2:00 minutes: `"https://www.example.com/example?t=120"`,
-
-So you need to supply: `'https://www.example.com/example?t='`
-
-And the plugin would concatenate the startTime according the chapters' entry metadata (see example [here](https://github.com/kaltura/playkit-js-seo/blob/master/demo/canary/index.html#L29))
+The Plugin doesn't require any configuration
 
 ## Full working code example
 

docs/integration-guide.md

@@ -11,7 +11,7 @@ Due to browser security policies, the player is constrained from directly manipu
 
 To enable the SEO plugin, follow these two essential steps:
 
-1. Activate the SEO plugin within the studio. (and supply the required configuration if you select extra data mode)
+1. Activate the SEO plugin within the studio.
 2. Implement an injection within the parent frame.
 
 
@@ -31,6 +31,6 @@ To enable the SEO plugin, follow these two essential steps:
     });
 </script>
 ```
-all you need to do , is copy this code snipt inot your `<head>` tag element.
+all you need to do , is copy this code snippet into your `<head>` tag element.
 
 By completing these steps, you'll ensure the proper integration and functioning of the SEO plugin and its benefits for your embedded content.

src/seo.ts

@@ -1,19 +1,18 @@
 import { BasePlugin, KalturaPlayer } from '@playkit-js/kaltura-player-js';
 import { convertDurationToISO8601, convertUnixTimestampToISO8601 } from './date-formaters';
 import type { Clip, VideoObject, WithContext } from 'schema-dts';
-import { Chapter, CuePoint, SEOConfig, TimedMetadataEvent } from './types';
+import { Chapter, CuePoint, TimedMetadataEvent } from './types';
 
 export const PLUGIN_NAME = 'seo';
 const SEO_SCRIPT_ID = `${location.hostname}k-player-seo`;
 
-export class Seo extends BasePlugin<SEOConfig> {
-  protected static defaultConfig: SEOConfig;
+export class Seo extends BasePlugin<Record<string, never>> {
   private chaptersData?: Chapter[];
   private transcriptData?: string;
   private timedDataReadyPromise: Promise<void>;
   private resolveTimedDataReadyPromise!: () => void;
 
-  constructor(name: string, player: KalturaPlayer, config?: SEOConfig) {
+  constructor(name: string, player: KalturaPlayer, config?: Record<string, never>) {
     super(name, player, config);
     this.eventManager.listenOnce(this.player, this.player.Event.Core.CHANGE_SOURCE_ENDED, async () => this.handleSEO());
     this.timedDataReadyPromise = new Promise((resolve) => {
@@ -71,7 +70,7 @@ export class Seo extends BasePlugin<SEOConfig> {
     const scriptTag = document.getElementById(SEO_SCRIPT_ID);
     if (scriptTag) {
       const data = JSON.parse(scriptTag.textContent!);
-      if (this.chaptersData?.length && this.config.baseSegmentsUrl) {
+      if (this.chaptersData?.length) {
         data.hasPart = this.getClips();
       }
       data.transcript = this.transcriptData;
@@ -86,7 +85,7 @@ export class Seo extends BasePlugin<SEOConfig> {
         name: chapter.name,
         startOffset: chapter.startTime,
         endOffset: chapter.endTime,
-        url: `${this.config.baseSegmentsUrl}${chapter.startTime}`,
+        url: Seo.concatenateStartTimeQueryParam(window.location.href, 'kalturaStartTime', chapter.startTime),
         ...(chapter.description && { description: chapter.description })
       };
     });
@@ -96,6 +95,19 @@ export class Seo extends BasePlugin<SEOConfig> {
     window.parent.postMessage({ type: 'SEOStructuredData', SEOStructuredData }, '*');
   }
 
+  private static concatenateStartTimeQueryParam(url: string, newParamName: string, newParamValue: number): string {
+    const encodedParamValue = encodeURIComponent(newParamValue);
+    const separator = url.includes('?') ? '&' : '?';
+    const fragmentIndex = url.indexOf('#');
+    let newURL;
+    if (fragmentIndex !== -1) {
+      newURL = url.slice(0, fragmentIndex) + separator + newParamName + '=' + encodedParamValue + url.slice(fragmentIndex);
+    } else {
+      newURL = url + separator + newParamName + '=' + encodedParamValue;
+    }
+    return newURL;
+  }
+
   private hasStructuredDataRequiredProperties(): boolean {
     const name = this.player.sources.metadata.name;
     const thumbnailUrl = this.player.sources.poster;

src/types.ts

@@ -7,10 +7,6 @@ export interface Chapter {
   description?: string;
 }
 
-export interface SEOConfig {
-  baseSegmentsUrl: string;
-}
-
 export enum GroupTypes {
   mid = 'mid',
   first = 'first',