jitsi_app_c0/modules/UI/videolayout/LocalVideo.js

/* global $, interfaceConfig, APP */
import ConnectionIndicator from "./ConnectionIndicator";
import UIUtil from "../util/UIUtil";
import UIEvents from "../../../service/UI/UIEvents";
import SmallVideo from "./SmallVideo";

var LargeVideo = require("./LargeVideo");
var RTCBrowserType = require("../../RTC/RTCBrowserType");

const TrackEvents = JitsiMeetJS.events.track;

function LocalVideo(VideoLayout, emitter) {
    this.videoSpanId = "localVideoContainer";
    this.container = $("#localVideoContainer").get(0);
    this.bindHoverHandler();
    this.VideoLayout = VideoLayout;
    this.flipX = true;
    this.isLocal = true;
    this.emitter = emitter;
    SmallVideo.call(this);
}

LocalVideo.prototype = Object.create(SmallVideo.prototype);
LocalVideo.prototype.constructor = LocalVideo;

/**
 * Creates the edit display name button.
 *
 * @returns {object} the edit button
 */
function createEditDisplayNameButton() {
    var editButton = document.createElement('a');
    editButton.className = 'displayname';
    UIUtil.setTooltip(editButton,
        "videothumbnail.editnickname",
        "top");
    editButton.innerHTML = '<i class="fa fa-pencil"></i>';

    return editButton;
}

/**
 * Sets the display name for the given video span id.
 */
LocalVideo.prototype.setDisplayName = function(displayName, key) {
    if (!this.container) {
        console.warn(
                "Unable to set displayName - " + this.videoSpanId +
                " does not exist");
        return;
    }

    var nameSpan = $('#' + this.videoSpanId + '>span.displayname');
    var defaultLocalDisplayName = APP.translation.generateTranslationHTML(
        interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);

    var meHTML;
    // If we already have a display name for this video.
    if (nameSpan.length > 0) {
        if (nameSpan.text() !== displayName) {
            if (displayName && displayName.length > 0) {
                meHTML = APP.translation.generateTranslationHTML("me");
                $('#localDisplayName').html(displayName + ' (' + meHTML + ')');
            } else {
                $('#localDisplayName').html(defaultLocalDisplayName);
            }
        }
        this.updateView();
    } else {
        var editButton = createEditDisplayNameButton();

        nameSpan = document.createElement('span');
        nameSpan.className = 'displayname';
        $('#' + this.videoSpanId)[0].appendChild(nameSpan);


        if (displayName && displayName.length > 0) {
            meHTML = APP.translation.generateTranslationHTML("me");
            nameSpan.innerHTML = displayName + meHTML;
        }
        else {
            nameSpan.innerHTML = defaultLocalDisplayName;
        }


        nameSpan.id = 'localDisplayName';
        this.container.appendChild(editButton);
        //translates popover of edit button
        APP.translation.translateElement($("a.displayname"));

        var editableText = document.createElement('input');
        editableText.className = 'displayname';
        editableText.type = 'text';
        editableText.id = 'editDisplayName';

        if (displayName && displayName.length) {
            editableText.value = displayName;
        }

        var defaultNickname = APP.translation.translateString(
            "defaultNickname", {name: "Jane Pink"});
        editableText.setAttribute('style', 'display:none;');
        editableText.setAttribute('data-18n',
            '[placeholder]defaultNickname');
        editableText.setAttribute("data-i18n-options",
            JSON.stringify({name: "Jane Pink"}));
        editableText.setAttribute("placeholder", defaultNickname);

        this.container.appendChild(editableText);

        var self = this;
        $('#localVideoContainer .displayname')
            .bind("click", function (e) {

                var editDisplayName = $('#editDisplayName');
                e.preventDefault();
                e.stopPropagation();
                $('#localDisplayName').hide();
                editDisplayName.show();
                editDisplayName.focus();
                editDisplayName.select();

                editDisplayName.one("focusout", function (e) {
                    self.VideoLayout.inputDisplayNameHandler(this.value);
                    $('#editDisplayName').hide();
                });

                editDisplayName.on('keydown', function (e) {
                    if (e.keyCode === 13) {
                        e.preventDefault();
                        $('#editDisplayName').hide();
                        // focusout handler will save display name
                    }
                });
            });
    }
};

LocalVideo.prototype.inputDisplayNameHandler = function (name) {
    this.emitter.emit(UIEvents.NICKNAME_CHANGED, UIUtil.escapeHtml(name));
};

LocalVideo.prototype.createConnectionIndicator = function() {
    if(this.connectionIndicator)
        return;

    this.connectionIndicator = new ConnectionIndicator(this, null);
};

LocalVideo.prototype.changeVideo = function (stream) {
    this.stream = stream;

    let localVideoClick = (event) => {
        // FIXME: with Temasys plugin event arg is not an event, but
        // the clicked object itself, so we have to skip this call
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        this.VideoLayout.handleVideoThumbClicked(true, this.id);
    };

    let localVideoContainerSelector = $('#localVideoContainer');
    localVideoContainerSelector.off('click');
    localVideoContainerSelector.on('click', localVideoClick);

    this.flipX = stream.videoType != "desktop";
    let localVideo = document.createElement('video');
    localVideo.id = 'localVideo_' + stream.getId();
    if (!RTCBrowserType.isIExplorer()) {
        localVideo.autoplay = true;
        localVideo.volume = 0; // is it required if audio is separated ?
    }

    var localVideoContainer = document.getElementById('localVideoWrapper');
    // Put the new video always in front
    UIUtil.prependChild(localVideoContainer, localVideo);

    var localVideoSelector = $('#' + localVideo.id);

    // Add click handler to both video and video wrapper elements in case
    // there's no video.

    // onclick has to be used with Temasys plugin
    localVideo.onclick = localVideoClick;

    if (this.flipX) {
        localVideoSelector.addClass("flipVideoX");
    }

    // Attach WebRTC stream
    stream.attach(localVideoSelector);

    let endedHandler = () => {
        localVideo = $('#' + localVideo.id)[0];
        localVideoContainer.removeChild(localVideo);
        this.VideoLayout.updateRemovedVideo(this.id);
        stream.off(TrackEvents.TRACK_STOPPED, endedHandler);
    };
    stream.on(TrackEvents.TRACK_STOPPED, endedHandler);
};

LocalVideo.prototype.joined = function (id) {
    this.id = id;
};

export default LocalVideo;