Skip to content

Commit

Permalink
Merge pull request #4309 from kaltura/SUP-37385
Browse files Browse the repository at this point in the history 
fix(SUP-37385): user cannot see q&a
  • Loading branch information
@inbalvasserman
inbalvasserman authored May 17, 2023
2 parents 1888f1f + a232bb0 commit e8fe09b
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 64 deletions.
4 changes: 2 additions & 2 deletions modules/QnA/resources/css/qna.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: none;
display: block;
}

.qna-on-video-btn:hover {
Expand All @@ -92,4 +92,4 @@
.qnaInterface > button:hover {
opacity: 0.7;
color: #002a80;
}
}
107 changes: 45 additions & 62 deletions modules/QnA/resources/qna.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,38 +138,34 @@

this.bind('layoutBuildDone', function (event, screenName) {
// add the Q&A toggle button to be on the video
embedPlayer.getVideoHolder().append('<div class="qna-on-video-btn qna-icon-close"><div class="qna-badge"></div></div>');
embedPlayer.getVideoHolder().append('<div class="qna-on-video-btn qna-icon-Ask"><div class="qna-badge"></div></div>');
_this.getQnaContainer();
qnaObject = _this.getQnaContainer().find(".qnaModuleBackground");
onVideoTogglePluginButton = $('.qna-on-video-btn');
if ( _this.getConfig( 'onPage' ) ) {

// register to on click to change the icon of the toggle button
onVideoTogglePluginButton.on("click", function(){

var openQnaContainer=!qnaObject.is(":visible");

if (_this.getPlayer().layoutBuilder.fullScreenManager.isInFullScreen()) {
_this.getPlayer().toggleFullscreen() ;
openQnaContainer=true;
}

_this.getQnaContainer();
if (openQnaContainer){
qnaObject.show();
_this.getPlayer().sendNotification("qna", {visible:true} );
} else {
qnaObject.hide();
_this.getPlayer().sendNotification("qna", {visible:false} );
}
_this.changeVideoToggleIcon();
});

_this.updateUnreadBadge();

// register to on click to change the icon of the toggle button
onVideoTogglePluginButton.on("click", function(){
var openQnaContainer=!qnaObject.is(":visible");
if (_this.getPlayer().layoutBuilder.fullScreenManager.isInFullScreen()) {
_this.getPlayer().toggleFullscreen() ;
openQnaContainer=true;
}
_this.getQnaContainer();
if (openQnaContainer){
qnaObject.show();
_this.getPlayer().sendNotification("qna", {visible:true} );
} else {
qnaObject.hide();
_this.getPlayer().sendNotification("qna", {visible:false} );
}
_this.changeVideoToggleIcon();
});
_this.updateUnreadBadge();
}
else {
$('.qna-on-video-btn').remove();
qnaObject.show();
_this.getPlayer().sendNotification("qna", {visible:true} );
}
});

Expand Down Expand Up @@ -250,49 +246,37 @@
// load the Q&A template to the div with qnaTargetId
getQnaContainer: function(){
var _this = this;
var embedPlayer = this.getPlayer();
var embedPlayer = this.getPlayer();
if (!this.$qnaListContainer && this.getPlayer().isLive()) {

this.markIfCanAccessToIframesParent();

if ( this.getConfig( 'onPage' ) ) {
// Inject external CSS files
this.injectCssToPage(this.getConfig('qnaAnnouncementsCssFileName'));
this.injectCssToPage(this.getConfig('qnaFontsCssFileName'));
this.injectCssToPage(this.getConfig('qnaNanoCssFileName'));
this.injectCssToPage(this.getConfig('qnaThreadsListCssFileName'));
this.injectCssToPage(this.getConfig('qnaMainCssFileName')); //should be last, since we we it to test css was loaded

this.getQnaInterfaceInsideIframe();
} else {
// wrap the .mwPlayerContainer element with our qnaInterface div
var floatDirection = this.getConfig( 'containerPosition' ) ? this.getConfig( 'containerPosition' ) : "right";
var qnaInterfaceElementText = "<div class='qnaInterface' style='position: relative; width: " + this.getConfig( 'moduleWidth' ) + "px; height: 100%; float:" + floatDirection + "'>";

$('.mwPlayerContainer').after(qnaInterfaceElementText);

this.$qnaListContainer = $( ".qnaInterface");

// resize the video to make place for the playlist according to its position (left, top, right, bottom)
if ( this.getConfig( 'containerPosition' ) === 'right' || this.getConfig( 'containerPosition' ) === 'left' ) {
$( ".videoHolder, .mwPlayerContainer" ).css( "width", $( ".videoHolder").width() - this.getConfig( 'moduleWidth' ) + "px" );
}

if ( this.getConfig( 'containerPosition' ) === 'left' ) {
$( ".mwPlayerContainer" ).css( "float", "right" );
}
else{
$( ".mwPlayerContainer" ).css( "float", "left" );
}
}

// wrap the .mwPlayerContainer element with our qnaInterface div
var floatDirection = this.getConfig( 'containerPosition' ) ? this.getConfig( 'containerPosition' ) : "right";
var qnaInterfaceElementText = "<div class='qnaInterface' style='position: relative; width: " + this.getConfig( 'moduleWidth' ) + "px; height: 100%; float:" + floatDirection + "'>";
$('.mwPlayerContainer').after(qnaInterfaceElementText);
this.$qnaListContainer = $( ".qnaInterface");
// resize the video to make place for the playlist according to its position (left, top, right, bottom)
if ( this.getConfig( 'containerPosition' ) === 'right' || this.getConfig( 'containerPosition' ) === 'left' ) {
$( ".videoHolder, .mwPlayerContainer" ).css( "width", $( ".videoHolder").width() - this.getConfig( 'moduleWidth' ) + "px" );
}
if ( this.getConfig( 'containerPosition' ) === 'left' ) {
$( ".mwPlayerContainer" ).css( "float", "right" );
}
else{
$( ".mwPlayerContainer" ).css( "float", "left" );
}
this.$qnaListContainer.append(this.getHTML());
this.originalPlayerWidth = $( ".videoHolder").width();

this.bindButtons();
this.positionQAButtonOnVideoContainer();
this.updateQnaListHolderSize();

// Create the KQnaService and KQnaModule after css were loaded
if ( this.getConfig( 'onPage' ) ) {
this.verifyCssLoaded(_this.$qnaListContainer).then(function(){
Expand All @@ -302,23 +286,22 @@
_this.KQnaModule.applyLayout();
});
}else{ // for in player plugin don't wait for css to load
_this.KQnaService = new mw.KQnaService(embedPlayer, _this);
_this.KQnaModule = new mw.KQnaModule(embedPlayer, _this, _this.KQnaService);
ko.applyBindings(_this.KQnaModule, _this.$qnaListContainer[0]);
_this.KQnaModule.applyLayout();
}
_this.KQnaService = new mw.KQnaService(embedPlayer, _this);
_this.KQnaModule = new mw.KQnaModule(embedPlayer, _this, _this.KQnaService);
ko.applyBindings(_this.KQnaModule, _this.$qnaListContainer[0]);
_this.KQnaModule.applyLayout();
}
}
else if ( !this.getPlayer().isLive() ) {
else if ( !this.getPlayer().isLive() ) {
this.markIfCanAccessToIframesParent();

if ( this.getConfig( 'onPage' ) ) {
this.getQnaInterfaceInsideIframe();
} else {
this.$qnaListContainer = $(".qnaInterface");
}
}

return this.$qnaListContainer;
}
return this.$qnaListContainer;
},

markIfCanAccessToIframesParent: function() {
Expand Down

0 comments on commit e8fe09b

Please sign in to comment.