Video Full screen

[bp2468]

While on full screen mode during video call, the call duration, speaker and microphone icons are not displayed. Able to view only the caller, callee and the call controls. Is it possible to get the call duration, speaker and microphone icons also in the full screen mode.

[bp2468]

In full screen mode, the speaker level, microphone level and timer are displayed with this code.

let originalTimerParent, originalMonitoringParent, originalMsgParent;

function ExpandVideoArea(lineNum){

$("#line-"+lineNum+"-msg").css({
    float: "left",
    borderRadius: "50px",
    paddingLeft: "15px",
    textAlign: "left",
    height: "26px",
    width: "75%",
    lineHeight: "26px",
    lineWidth: "75px",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
});

$("#line-"+lineNum+"-timer").css({
    float: "right",
    marginRight: "10px",
    marginLeft: "10px",
    height: "26px",
    lineHeight: "26px",
});

originalTimerParent =  $("#line-" + lineNum + "-timer").parent();
originalMonitoringParent = $("#line-" + lineNum + "-monitoring").parent();
originalMsgParent = $("#line-" + lineNum + "-msg").parent();

$("#line-" + lineNum + "-timer").appendTo("#line-" + lineNum + "-call-fullscreen").css({
  position: "absolute",
  top: "40px",
  right: "10px",
  zIndex: 100,
  display: "block",
  visibility: "visible",
  opacity: 1
});

$("#line-" + lineNum + "-monitoring").appendTo("#line-" + lineNum + "-call-fullscreen").css({
  position: "absolute",
  top: "10px",
right: "10px",
  zIndex: 100,
  display: "block",
  visibility: "visible",
  opacity: 1
});


   $("#line-" + lineNum + "-call-fullscreen").prop("class","streamSection highlightSection FullScreenVideo");

    $("#line-" + lineNum + "-btn-restore").show();
    $("#line-" + lineNum + "-btn-expand").hide();

    $("#line-" + lineNum + "-VideoCall").css("background-color", "#FFFFFF");

    RedrawStage(lineNum, false);
    if(typeof web_hook_on_expand_video_area !== 'undefined') {
        web_hook_on_expand_video_area(lineNum);
    }
}

function RestoreVideoArea(lineNum){

$("#line-"+lineNum+"-msg").css({
    float: "left",
    borderRadius: "50px",
    paddingLeft: "15px",
    textAlign: "left",
    height: "26px",
    width: "75%",
    lineHeight: "26px",
    lineWidth: "75px",
    whiteSpace: "nowrap",
    overflow: "hidden",
    textOverflow: "ellipsis"
});
$("#line-"+lineNum+"-timer").css({
    float: "right",
    marginRight: "10px",
    marginLeft: "10px",
    height: "26px",
    lineHeight: "26px",
    textAlign: "right",
    left: "8px"
});

    originalMonitoringParent.append($("#line-" + lineNum + "-monitoring"));
    originalMsgParent.append($("#line-" + lineNum + "-msg"));
    $("#line-" + lineNum + "-timer").appendTo($("#line-" + lineNum + "-monitoring"));


    $("#line-" + lineNum + "-call-fullscreen").prop("class","streamSection highlightSection");

    $("#line-" + lineNum + "-btn-restore").hide();
    $("#line-" + lineNum + "-btn-expand").show();

    $("#line-" + lineNum + "-VideoCall").css("background-color", "");

    RedrawStage(lineNum, false);
    if(typeof web_hook_on_restore_video_area !== 'undefined') {
        web_hook_on_restore_video_area(lineNum);
    }
}

[bp2468]

In full screen mode, there is a white space between the video and the call controls. How to remove it?

[bp2468]

code for removing white space issue: (Tested in iframe):

In ExpandVideoArea(), call RedrawStage by passing FullScreenVideo to true

RedrawStage(lineNum, false, true);

function RedrawStage(lineNum, videoChanged, FullScreenVideo=false){
.....
 else {
            // None of the videos are pinned
            if(srcVideoWidth > 10 && srcVideoHeight >= 10) {
                // Unpinned
                $(video).parent().css("width", videoWidth+"px");
                if(!FullScreenVideo)
                $(video).parent().css("height", videoHeight+"px");
                else
                $(video).parent().css("height", "100%");
......
}

[bp2468]

else {
           // None of the videos are pinned
           if(srcVideoWidth > 10 && srcVideoHeight >= 10) {
               // Unpinned
               $(video).parent().css("width", videoWidth+"px");
               if(!FullScreenVideo) {
                 $(video).parent().css("height", videoHeight+"px");
               }
               else {
                 $(video).css("object-fit", "fill");
                 $(video).parent().css("height", "100%");
               }

.....
}