@playkit-js/rapt 0.4.10-canary.0-878cdb7

package/.github/workflows/run_canary_full_flow.yaml

@@ -0,0 +1,28 @@
+## Canary CI/CD
+name: Canary Full Flow
+run-name: Canary Full Flow
+
+on:
+  push:
+    branches:
+      - devops-deployment
+
+jobs:
+  canary-full-flow:
+    if: ${{ github.actor != 'PlaykitJs-Bot' }}
+    uses: kaltura/ovp-pipelines-pub/.github/workflows/player_cicd.yaml@path
+    secrets:
+      PLAYER_CENTRAL_ACCOUNT_ID: ${{ secrets.PLAYER_CENTRAL_ACCOUNT_ID }}
+      PLAYER_SERVICES_ACCOUNT_ID: ${{ secrets.PLAYER_SERVICES_ACCOUNT_ID }}
+      PLAYER_S3_BUCKET_DEPLOYMENT: ${{ secrets.PLAYER_S3_BUCKET_DEPLOYMENT }}
+      PLAYER_S3_BUCKET_APPS: ${{ secrets.PLAYER_S3_BUCKET_APPS }}
+      PLAYER_NPM_TOKEN: ${{ secrets.PLAYER_NPM_TOKEN }}
+      PLAYER_LAMBDA_NAME: ${{ secrets.PLAYER_LAMBDA_NAME }}
+      PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }}
+      PLAYER_GITHUB_BOT_TOKEN: ${{ secrets.PLAYER_GITHUB_BOT_TOKEN }}
+    with:
+      type: "plugin"
+      stage: "canary"
+      schema-type: "playerV3OvpVersions"
+      tests-yarn-run-to-execute: 'tgz build'
+

package/.github/workflows/run_prod.yaml

@@ -0,0 +1,24 @@
+## Prod CI
+name: Prod
+run-name: Prod
+
+on:
+  workflow_dispatch:
+
+jobs:
+  prod:
+    uses: kaltura/ovp-pipelines-pub/.github/workflows/player_cicd.yaml@path
+    secrets:
+      PLAYER_CENTRAL_ACCOUNT_ID: ${{ secrets.PLAYER_CENTRAL_ACCOUNT_ID }}
+      PLAYER_SERVICES_ACCOUNT_ID: ${{ secrets.PLAYER_SERVICES_ACCOUNT_ID }}
+      PLAYER_S3_BUCKET_DEPLOYMENT: ${{ secrets.PLAYER_S3_BUCKET_DEPLOYMENT }}
+      PLAYER_S3_BUCKET_APPS: ${{ secrets.PLAYER_S3_BUCKET_APPS }}
+      PLAYER_NPM_TOKEN: ${{ secrets.PLAYER_NPM_TOKEN }}
+      PLAYER_LAMBDA_NAME: ${{ secrets.PLAYER_LAMBDA_NAME }}
+      PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }}
+      PLAYER_GITHUB_BOT_TOKEN: ${{ secrets.PLAYER_GITHUB_BOT_TOKEN }}
+    with:
+      type: "plugin"
+      env: "prod"
+      schema-type: "playerV3OvpVersions"
+      tests-yarn-run-to-execute: 'tgz build'

package/.github/workflows/run_tests.yaml

@@ -0,0 +1,24 @@
+## CI - Player And Plugin Tests
+name: Player And Plugin Tests
+run-name: Player And Plugin Tests
+
+on:
+  pull_request:
+    branches:
+      - "*"
+
+jobs:
+  running-tests:
+    uses: kaltura/ovp-pipelines-pub/.github/workflows/player_tests.yaml@path
+    with:
+      yarn-run-to-execute: 'tgz build'
+  notification:
+    if: always()
+    uses: kaltura/ovp-pipelines-pub/.github/workflows/notification.yaml@path
+    needs: running-tests
+    secrets:
+      PLAYER_MSTEAMS_WEBHOOK: ${{ secrets.PLAYER_MSTEAMS_WEBHOOK }}
+    with:
+      failure-status: ${{ contains(needs.*.result, 'failure') }}
+      cancelled-status: ${{ contains(needs.*.result, 'cancelled') }}
+      is-test: 'true'

package/.github/workflows/semantic-pr-title.yml

@@ -0,0 +1,15 @@
+name: "Semantic PR title"
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v3.4.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.4.10-canary.0-878cdb7 (2023-05-16)

package/README.md

@@ -0,0 +1,223 @@
+# PlayKit JS Rapt Player - Interactive Player Plugin for the [Kaltura Player JS]
+
+[![Build Status](https://github.com/kaltura/kaltura-interactive-player/actions/workflows/run_canary_full_flow.yaml/badge.svg)](https://github.com/kaltura/kaltura-interactive-player/actions/workflows/run_canary_full_flow.yaml)
+[![](https://img.shields.io/npm/v/@playkit-js/rapt/latest.svg)](https://www.npmjs.com/package/@playkit-js/rapt)
+[![](https://img.shields.io/npm/v/@playkit-js/rapt/canary.svg)](https://www.npmjs.com/package/@playkit-js/rapt/v/canary)
+
+
+# rapt-player
+'Rapt' is an interactive way to consume video, where the end-user can make decisions along the video or navigate to 
+external web pages. We will use the term 'interactive-video' or IV (and KIP for Kaltura-Interactive-Player) 
+
+## Description 
+The KIP is in fact a code that switches players at runtime. Each video node is loaded in its own player so
+it caches the first few seconds of that video to get an immediate playback experience. The KIP receives
+a rapt playlist-id as a starting-point, loads Rapt metadata (the mapping of the rapt project), loads the initial video,
+places the Rapt-engine layer (the layer that shows the IV UI) and in the background caches the relevant videos. Once 
+the user interacts with the Rapt engine layer, the KIP will move the next video to the front and play it.    
+    
+
+## Install: 
+```
+git clone https://github.com/kaltura/kaltura-interactive-player.git
+cd kaltura-interactive-player
+npm install
+```
+
+## Dev setup 
+Since most Interactive Videos today are generated in MediaSpace™, they are KS protected. This means that the index.html
+is expected to have a valid KS in it. The default entry is of partner-id 27017 and the hard-coded KS will expire around
+Sep 23 2019. Please do not edit this entry as it is designed to cover many use cases.  
+The default index.html also has an example of how to embed a KIV, and how to integrate with it and listen to events
+                                                                  
+
+## Run: 
+```
+npm start
+```
+
+## Embed: 
+This library will be bundled inside the Kaltura playkit-js library and served by it. 
+In most cases, KMS will generate the player uiconf for you, in case you create the player maually, you will need to make sure that the player V3 version incluses the Rapt V3 "plugin". You do that by setting the 'Additional flashvars' field to something that looks like this template:
+```
+{"kaltura-ovp-player":"V3_PLAYER_VERSION","path" : "PATH_VERSION"}
+```
+E.G. {"kaltura-ovp-player":"0.37.2","path" : "0.1.5"}
+
+This next snippet will show a typical embed code of a rapt player
+
+ ```
+<!-- playkit-js library code and Rapt  -->
+<script src="http://cdnapisec.kaltura.com/p/27017/embedPlaykitJs/uiconf_id/42897631"></script>
+
+<!-- The div that hosts the rapt project-->
+<div id="player"></div>
+
+<!-- embed-code  --> 
+<script>
+    // Rapt config
+    var config = {
+		targetId: 'player',
+		playback:{
+			autoplay:true,
+			preload:"auto"
+		},
+		provider: {
+			partnerId: 27017,
+			uiConfId: 43533251,
+			ks: "Zjk0YmQwZTRkZDFjOTE1MGEwMWYwMmEzYzE4ODI4ZTA1YzFkNjRjNHwyNzAxNzsyNzAxNzsxNTM1NzE5NTAyOzI7NzU0MztfX0FETUlOX18yNjY4NzsqLGRpc2FibGVlbnRpdGxlbWVudA=="
+		},
+        rapt:{}
+	};
+	var raptPlayer = PathKalturaPlayer.setup(config);
+	raptPlayer.loadMedia({playlistId: '1_4377j2jl'});
+
+</script>
+```
+
+
+## Configrations:
+The Rapt configuration is in fact an extension of the playkit-js configuration with the addition of the rapt section. 
+
+## API 
+#####Event Listening:
+The embed code shows how to create a Rapt-player instance. Once you have that instance you can listen to events and 
+query the player for information
+
+Assuming the name of the player instance is 'raptPlayer' like the demo, here's how to add listeners to it:
+
+raptPlayer.addListener(EVENT_TYPE, event => {
+    
+})
+
+Some events has payload, some don't. Her's an example for listening to a hotspot click, and retrieving 
+the hotspot object from the payload, which is the hotspot object
+```
+raptPlayer.addListener("hotspot:click", event => {
+    const hotspot = event.payload; 
+    /* E.G. 
+    {
+        "id": "24070b0a-c332-4a89-bb4f-27114a7eb94c",
+        "name": "Snail",
+        "nodeId": "e14d8699-52dc-495c-bf25-6cf49e71dec1",
+        "label": "Snail",
+        "showAt": 0,
+        "hideAt": 1,
+        "style": {...},
+        "position": {
+            "left": 30,
+            "top": 27,
+            "width": 133,
+            "height": 57
+        },
+        "onClick": [],
+        "customData": null
+    }
+    */ 
+})
+```
+Another common action is to know when a node is played: 
+```
+raptPlayer.addListener("node:enter", event => {
+    const node = event.payload;
+    /* E.G. 
+    {
+        "id": "e14d8699-52dc-495c-bf25-6cf49e71dec1",
+        "xref": null,
+        "name": "Hens",
+        "customData": "whatever",
+        "entryId": "1_b29y3jnj",
+        "onEnded": [{
+            "type": "project:stop",
+            "payload": {}
+        }],
+        "prefetchNodeIds": [] 
+    }
+    */    
+    
+})
+```
+
+
+####Events
+Event String   | Description                                         | Payload
+-------------- | ---------------                                     | --------
+browser:hidden | when the player focuses a new tab                   | 
+browser:open   |  when the player focuses a new tab                  | 
+cue:forward    |  when a node goes pass a code-cue point             | 
+cue:reverse    |  when a node goes back a code-cue point             | 
+hotspot:click  | user clicked a hotspot                              | the hotspot object 
+node:enter     |  A node started to play                             | the node object that had started to play
+node:ended     |  A node had reached its end                         | the node object that reached the end of video
+node:exit      |   when a user left a node                           | the node object that was left to another node
+project:load   | triggered once when the player loaded               | 
+project:ready  | triggered when the data was loaded                  | 
+project:start  | triggered when the start-node had started playing   | 
+ 
+####Query Rapt data
+We can access the rapt raw data, as it is saved on the database by writing this phrase: 
+
+```
+raptPlayer.data 
+
+// print all hotspots 
+console.table(raptPlayer.data.hotspots);
+
+// print all nodes 
+console.table(raptPlayer.data.nodes);
+
+// get the starting node id
+console.log(raptPlayer.data.settings.startNodeId);
+```
+####Commands 
+We can command the player to preform some playback actions (on the current played video) and also to tell the rapt player
+to "jump" to a different node. 
+
+Here are the supported actions:
+```
+raptPlayer.pause(); // pause current video 
+raptPlayer.play(); // play current video
+raptPlayer.seek(50); // seek the current video to sec 50
+raptPlayer.volume(0); mute the player (will effect all next nodes as well)
+raptPlayer.jump({name:'Start'}); // Switch the content to play a node that has the name 'start'
+raptPlayer.jump({id:'7354fd9b-6401-4c10-b261-99b4d183d07e'}); // Switch the content to play a node that has the given id 
+```
+
+## Limitations 
+Iphone cannot buffer less than 30 minutes of video, meaning that it will consume a big bandwidth. 
+For iphone we have disabled the pre-buffering mechanism.  
+
+### Locked kaltura player version
+> Kaltura Player must be 0.47.8 (Relies on internal API that might not be guarantee forward comp')
+- [ ] Black-rectangle hides the player when no thumbnail - used CSS to hide it (Rapt-217)
+- [ ] __kalturaplayerdata.UIConf (Kip.ts) to read uiconf data 
+- [ ] Open a pull request
+
+
+### Licensing
+This project is licensed under the AGPL-3.0 License - see the LICENSE.md file for details
+
+
+## How to Release
+1. Go to package.json file and change the version
+2. Go to version.ts file and change the version
+3. Commit and Push with a message "chore(bump): bump to version $VERSION"
+4. Run  ```
+        npm tag
+        ```
+, or create a new tag via github
+5. Run  ```
+        npm build
+        ```
+6. Run  ```
+        npm tgz
+        ``` 
+, this will output a tar.gz file in dist folder
+7. Go to the new tag in github and click on Edit and add the tar.gz file from dist folder
+
+
+## Deployment Instructions
+Extract the tgz files into a folder by the name of the version, in all bundle machines
+(E.G. /opt/kaltura/html5/html5lib/playkitSources/rapt/0.4.6/). The output is 2 files on that folder.
+
+Alternatively - copy the 2 files directly from the release (.js and .js.map) to the relevant folder.

package/docs/API.md

@@ -0,0 +1,222 @@
+# API
+The API of the Kaltura Interactive Player is constructed to 2 main options. You can listen to player events, and you can command the player to preform an action. 
+
+## [Commanding the player](#Commands)
+The API of the player in fact a reflection of playkit-js API and can be seen here: 
+https://github.com/kaltura/playkit-js
+
+Example:
+```
+ // setup 
+ var kalturaInteractivePlayer = Kip.setup(config);
+
+ // Media-load
+ kalturaInteractivePlayer.loadMedia({ "entryId" : "0_dm5h0dD" });
+ 
+ // play the current video
+ kalturaInteractivePlayer.play();
+ 
+ // pause the current video
+ kalturaInteractivePlayer.pause();
+  
+ // Set volume to 50%  
+ kalturaInteractivePlayer.volume = 0.5;
+
+ // Seek current video to sec 10 
+ kalturaInteractivePlayer.seek(10);
+ 
+```
+
+## [Extracting data from the player]()
+Once we have a reference to the player we can just use one of the getters function to access the data
+
+Example:
+```
+ // setup 
+ var kalturaInteractivePlayer = Kip.setup(config);
+
+ // Media-load
+ kalturaInteractivePlayer.loadMedia({ "entryId" : "0_dm5h0dD" });
+ 
+  // get the current video playhead-position  
+ const currentTime = kalturaInteractivePlayer.currentTime   
+ 
+ // get the current video volume 
+ const currentVolume = kalturaInteractivePlayer.volume   
+  
+```
+
+## [Events Listening](#Events)
+
+Events are published from the player and can be subscribed to in order to extend the interactive experience or inform analytics services. 
+Every event is an object with type and payload properties. 
+The payload property will return information about the project, it’s current state, and, depending on the event, custom data fed from fields in the Rapt Media composer.
+
+Example:
+```
+ // setup 
+ var kalturaInteractivePlayer = Kip.setup(config);
+ // Event listening
+ kalturaInteractivePlayer.addListener("project:load" , function (event) {
+    console.log(event.type); // project:load
+    console.log(event.payload); // project:load
+ });
+ // Media-load
+ kalturaInteractivePlayer.loadMedia({ "entryId" : "0_dm5h0dD" });
+  
+```
+<br/>
+
+## Commands 
+  
+#### function play();
+Play the current video
+
+#### function pause();
+Pause the current video
+
+#### function seek(n);
+Seek current video to a specific second. 
+
+#### function volume(n);
+Set the volume of the player. value need to be between 0 to 1.
+
+## Events
+#### project:load
+A new project is loading. Project data will not be available.
+##### payload
+None
+
+#### project:ready
+A new project has been loaded.
+##### payload
+None
+
+#### project:start
+The project has started. Triggered on the first media play event of a given play through (will re-trigger on replay’s).
+##### payload
+None
+
+#### project:ended
+The project has reached the end of a given branching structure.
+##### payload
+None
+
+#### project:replay
+The project is being reset for replay.
+##### payload
+None
+
+#### project:unload
+The project has been unloaded.
+##### payload
+None
+
+#### project:reset
+The project has been reset to the beginning.
+##### payload
+None
+
+#### node:enter
+A new node has been loaded.
+##### payload
+kind - only on the 1st node will be "start". All other will be "jump"
+```
+{
+ kind: "jump" || "start" ,
+ node: [THE_NODE_OBJECT],
+ prevNode: [THE_PREVIOUS_NODE] / undefine in case of first node  
+}
+```
+
+#### node:exit
+The current node will be unloaded.
+##### payload
+```
+{
+ kind:  "jump",
+ node: [THE_NODE_OBJECT],
+ nextNode: [THE_NEXT_NODE]  
+}
+```
+
+#### node:ended
+The current node has ended.
+##### payload
+```
+{
+ kind: [THE_NODE_NAME],
+ node: [THE_NODE_OBJECT],
+ prevNode: [THE_PREVIOUS_NODE] / undefine in case of first node  
+}
+```
+
+#### hotspot:click
+The user has clicked on a hotspot.
+##### payload
+```
+{
+ hotspot: [THE_HOTSPOT_OBJECT] 
+}
+```
+
+#### browser:open
+The project has opened a new window.
+##### payload
+```
+{
+ href: [URL_TO_OPEN],
+ target: "_blank" 
+}
+```
+
+#### browser:hidden
+The browser window has been hidden. The interactive video will be paused.
+##### payload
+None
+
+#### cue:forward
+Playback has crossed over a cue point. Cue points are custom api events that can be added using the Rapt Media composer by entering the node editor and turning on the api event timeline. Custom data can be added to each cue point and is passed through in the payloadproperty.
+##### payload
+```
+{
+ cue: {
+        customData : [THE_CUEPOINT_STRING],
+        id : [THE_CUEPOINT_ID]
+      }
+}
+```
+
+#### cue:reverse
+Playback has reversed passed a cue point. Cue points are custom api events that can be added using the Rapt Media composer by entering the node editor and turning on the api event timeline. Custom data can be added to each cue point and is passed through in the payload property.
+##### payload
+```
+{
+ cue: {
+        customData : [THE_CUEPOINT_STRING],
+        id : [THE_CUEPOINT_ID]
+      }
+}
+```
+
+#### player:play
+The current video has started playing.
+##### payload
+None
+
+#### player:pause
+The current video has been paused.
+##### payload
+None
+
+#### player:progress
+The playhead has crossed a predefined progress point. Event fires at 25%, 50%, 75% and 98% of every node.
+##### payload
+The percentage are in format of decimal fraction (E.G. 0.5 = 50%)
+```
+{
+    progress: [DECIMAL_PERCENTAGE]
+}
+```
+
+