Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Advance interactive video #197

Open
wants to merge 14 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10,186 changes: 10,186 additions & 0 deletions KalturaGeneratedAPIClientsPHP/KalturaClient.php

Large diffs are not rendered by default.

1,487 changes: 1,487 additions & 0 deletions KalturaGeneratedAPIClientsPHP/KalturaClientBase.php

Large diffs are not rendered by default.

5,313 changes: 5,313 additions & 0 deletions KalturaGeneratedAPIClientsPHP/KalturaEnums.php

Large diffs are not rendered by default.

24,347 changes: 24,347 additions & 0 deletions KalturaGeneratedAPIClientsPHP/KalturaTypes.php

Large diffs are not rendered by default.

38 changes: 38 additions & 0 deletions KalturaGeneratedAPIClientsPHP/get-kaltura-playlist.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<?php
require_once('KalturaClient.php');

$config = new KalturaConfiguration();
$config->setServiceUrl('https://www.kaltura.com');
$client = new KalturaClient($config);

$loginId = "{USER_EMAIL}";
$password = "{PASSWORD}";
$partnerId = "";
$expiry = 86400;
$privileges = "*";
$otp = "";
$page_size = $_GET['pageSize'];
$page_index = $_GET['pageIndex'];
$search_text = $_GET['searchText'];

try {
$ks = $client->user->loginByLoginId($loginId, $password, $partnerId, $expiry, $privileges, $otp);
// var_dump($ks);
$client->setKS($ks);

$filter = new KalturaMediaEntryFilter();
$filter->searchTextMatchOr = $search_text;
$pager = new KalturaFilterPager();
$pager->pageSize = $page_size;
$pager->pageIndex = $page_index;


try {
$result = $client->media->listAction($filter, $pager);
echo json_encode(array("results" => $result));
} catch (Exception $e) {
echo json_encode(array("error" => $e->getMessage()));
}
} catch (Exception $e) {
echo json_encode(array("error" => $e->getMessage()));
}
17 changes: 17 additions & 0 deletions advance-interactive-video-readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
# Advance Interactive Video

## Installation

To install the additional features such as the Kaltura, Youtube and Vimeo Pro playlist follow the below instructions.

```
# For Kaltura integration:-

Please Enter your Kaltura Credentials like 'secret', partnerId, expiry, privileges and sessionType inside KalturaGeneratedAPIClientsPHP/GetKalturaMediaEntry.php.

#For Youtube and Vimeo Pro Integration:-

Open src/scripts/config.js file and add your youtube API key
and channel Id. Whereas, for Vimeo pro you need to add token and channel ID.

```
9 changes: 9 additions & 0 deletions library.json
Original file line number Diff line number Diff line change
@@ -20,11 +20,20 @@
"preloadedJs": [
{
"path": "dist/h5p-interactive-video.js"
},
{
"path": "src/scripts/custom-integration.js"
},
{
"path": "src/scripts/config.js"
}
],
"preloadedCss": [
{
"path": "dist/h5p-interactive-video.css"
},
{
"path": "src/styles/modal.css"
}
],
"preloadedDependencies": [
7,598 changes: 7,588 additions & 10 deletions package-lock.json

Large diffs are not rendered by default.

14 changes: 14 additions & 0 deletions src/scripts/config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@

const YoutubeConfig = {
'channelId' : 'YOUTUBE_CHANNEL_ID',
'maxResults' : '', // Set The video search limit (optional)
'key' : 'YOUTUBE_API_KEY',
'order' : 'date', // can be searchSortUnspecified, date, rating, viewCount, relevance, title, videoCount
'part' : 'snippet',
}

const VimeoConfig = {
'bearerToken' : 'VIMEO_TOKKEN',
'channelId' : 'CHANNEL_ID', // NUMBERS ONLY
'perPage' : 5
}
485 changes: 485 additions & 0 deletions src/scripts/custom-integration.js

Large diffs are not rendered by default.

32 changes: 32 additions & 0 deletions src/scripts/endscreen.js
Original file line number Diff line number Diff line change
@@ -150,7 +150,39 @@ class Endscreen extends H5P.EventDispatcher {
* submissions basically mean a new attempt of the parent (IV).
* This is subject to being changed.
*/







this.parent.triggerXAPIScored(this.parent.getUsersScore(), this.parent.getUsersMaxScore(), 'completed');
for (const iv_interaction of this.parent.interactions) {
if(typeof iv_interaction.getLastXAPIVerb() != "undefined") {
console.log(iv_interaction.getLastXAPIVerb());

}
else{
//this.parent.triggerXAPIScored(this.parent.getUsersScore(), this.parent.getUsersMaxScore(), 'skipped');
const customProgressedEvent = this.parent.createXAPIEventTemplate('skipped');
//console.log(iv_interaction.content.metadata.title);
//console.log('Updated 170');
//console.log(iv_interaction.getMetadata());
var metaDataArr = iv_interaction.getMetadata();
if (customProgressedEvent.data.statement.object) {
customProgressedEvent.data.statement.object.definition['name'] = {'en-US': metaDataArr.title};
//console.log(customProgressedEvent);
//section.instance.triggerXAPIScored(0,1,customProgressedEvent);
this.parent.trigger(customProgressedEvent);
}
}
}

if( typeof this.parent.contentData.standalone !== undefined && this.parent.contentData.standalone){
this.parent.triggerXAPIScored(this.parent.getUsersScore(), this.parent.getUsersMaxScore(), 'submitted-curriki');
}

}

/**
2 changes: 1 addition & 1 deletion src/scripts/interaction.js
Original file line number Diff line number Diff line change
@@ -323,7 +323,7 @@ function Interaction(parameters, player, previousState) {
if (event.which === 32) {
goto({data: parameters.goto.time});
}
}).attr('href', '#')
}).attr('href', 'javascript:void(0)') // default href = '#'
.attr('tabindex', '0');
}
else { // URL
18 changes: 18 additions & 0 deletions src/scripts/interactive-video.js
Original file line number Diff line number Diff line change
@@ -335,6 +335,11 @@ function InteractiveVideo(params, id, contentData) {
self.seek(loopTime);
}

// If there are no tasks in the interactions or summary, trigger completed verb
if (!self.isTask) {
this.parent.triggerXAPIScored(1, 1, 'completed');
}

break;
}
case H5P.Video.PLAYING:
@@ -1653,6 +1658,9 @@ InteractiveVideo.prototype.addBookmark = function (id, tenth) {
* @returns {H5P.jQuery}
*/
InteractiveVideo.prototype.addEndscreen = function (id, tenth) {
if(typeof this.parent !== 'undefined'){
return false;
}
var self = this;
var endscreen = self.options.assets.endscreens[id];

@@ -3443,6 +3451,8 @@ InteractiveVideo.prototype.findNextInteractionToShow = function (time, index) {
InteractiveVideo.prototype.findNextInteractionToHide = function (time) {
let candidate;
for (var i = 0; i < this.visibleInteractions.length; i++) {
if(this.interactions[this.visibleInteractions[i]] === undefined) ///check if interations are 0 then return back
return candidate;
const duration = this.interactions[this.visibleInteractions[i]].getDuration();
if (candidate === undefined || duration.to < this.interactions[this.visibleInteractions[candidate]].getDuration().to) {
candidate = i;
@@ -3808,6 +3818,14 @@ InteractiveVideo.prototype.getXAPIData = function () {
};
};

InteractiveVideo.prototype.getAnswerGiven = function () {
var self = this;
const answeredTotal = self.interactions
.map (interaction => interaction.getProgress() || 0)
.reduce((a, b) => a + b, 0);
return answeredTotal;
};

/**
* Add the question itself to the definition part of an xAPIEvent
*/
247 changes: 247 additions & 0 deletions src/styles/modal.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,247 @@
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 2; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 200px;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
max-width: 800px;
height: 300px;
overflow: auto;
}

/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}

.hide-playlist {
display: none;
}

.hide-playlist-search {
display: none;
}

.modal-content nav .pagination {
list-style: none;
display: flex;
}

.modal-content nav .pagination .page-item {
margin-left: 5px;
}


.h5p-playlist-button {
margin-left: 15px;
}

/* Tabs */


.tabset {
margin-bottom: 20px;
margin-top: 10px;
min-width: 320px;
/* max-width: 500px; */
}

.tabset section {
background: #fff;
color: #373737;
backface-visibility: hidden;
overflow: hidden;
}
.tabset > section {
display: none;
}
input[name="tabset"] {
display: none;
}
.tabset label {
display: inline-block;
padding: 15px 25px;
font-weight: 600;
text-align: center;
border-bottom: 1px solid transparent;
transition: all .3s ease-out 0.1s;
}
.tabset label:hover {
color: #fff;
cursor: pointer;
}
input[name="tabset"]:checked + label {
background: #ffffff;
color: #fd7034;
border-bottom: 1px solid;
}

#kaltura:checked ~ section#kalturaPlaylist,
#youtube:checked ~ section#youtubePlaylist,
#vimeo:checked ~ section#vimeoPlaylist {
display: block;
animation-name: inUp;
animation-timing-function: ease-in-out;
animation-duration: .6s;
}



.loadPlaylist {
background-color: #0a78d1;
color: #fff;
border-color: #0a78d1;
font-family: Open Sans,sans-serif;
font-size: .95em;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 1em;
display: inline-block;
cursor: pointer;
border: 2px solid transparent;
transition: background-color .35s ease;
padding: .65em 1.5em;
border-radius: 1.375em;
}

.loadPlaylist:hover {
background-color: #096ab9;
border-color: #096ab9;
}


.h5p-add-dialog-table .h5p-file-url-wrapper {
display: flex;
}


.h5p-add-dialog-table .h5p-file-url-wrapper input.h5peditor-text {
width: 316px;
font-size: 15px;
border-radius: 1.375em !important;
}

.loadPlaylist {
background-color: #0a78d1;
color: #fff;
border-color: #0a78d1;
font-family: Open Sans,sans-serif;
font-size: 14px;
font-weight: 600;
text-align: center;
text-decoration: none;
line-height: 1em;
display: inline-block;
cursor: pointer;
border: 2px solid transparent;
transition: background-color .35s ease;
padding: 10px 13px;
border-radius: 1.375em;
}

.h5p-playlist-button-wrapper {
margin-left: 15px;
}

#playlistContent .play-lists {
overflow: hidden;
text-align: center;
margin-top: 25px;
}

#playlistContent .play-lists .play-item {
width: 30%;
display: inline-block;
padding: 0 10px;
margin: 20px 0;
vertical-align: top;
}

#playlistContent .play-lists .play-item img {
height: 135px;
width: 100%;
object-fit: cover;
}

#playlistContent .modal-content {
padding: 30px;
position: relative;
}

#playlistContent .modal-content .search-playlist {
text-align: center;
}

#playlistContent .modal-content .search-playlist input {
height: 32px;
font-size: 15px;
text-transform: capitalize;
padding-left: 15px;
border-radius: 50px;
}

#playlistContent .modal-content .search-playlist input:focus {
outline: none;
}


#playlistContent .modal-content .close {
position: absolute;
right: 48px;
top: 28px;
}

.modal-content nav .pagination {
align-items: center;
justify-content: center;
margin-top: 30px;
}

.modal-content nav .pagination .page-item .page-link {
background: #0a78d1;
color: #fff;
padding: 2px 9px;
border-radius: 50px;
text-align: center;
transition: 0.3s all;
}

.modal-content nav .pagination .page-item.active .page-link {
background: #dd0505;
}

.modal-content nav .pagination .page-item {
margin: 0 4px;
}


#playlistContent .play-lists .play-item .kaltura-video-title {
font-weight: 600;
margin-top: 5px;
display: block;
}