jitsi_corner4/modules/UI/videolayout/Filmstrip.js

/* global $, APP, interfaceConfig */

import { getVerticalFilmstripVisibleAreaWidth, isFilmstripVisible } from '../../../react/features/filmstrip';

const Filmstrip = {
    /**
     * Returns the height of filmstrip
     * @returns {number} height
     */
    getFilmstripHeight() {
        // FIXME Make it more clear the getFilmstripHeight check is used in
        // horizontal film strip mode for calculating how tall large video
        // display should be.
        if (isFilmstripVisible(APP.store) && !interfaceConfig.VERTICAL_FILMSTRIP) {
            return $('.filmstrip').outerHeight();
        }

        return 0;
    },

    /**
     * Returns the width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
     *
     * @returns {number} - The width of the vertical filmstip if the filmstrip is visible and 0 otherwise.
     */
    getVerticalFilmstripWidth() {
        return isFilmstripVisible(APP.store) ? getVerticalFilmstripVisibleAreaWidth() : 0;
    },

    /**
     * Resizes thumbnails for tile view.
     *
     * @param {number} width - The new width of the thumbnails.
     * @param {number} height - The new height of the thumbnails.
     * @param {boolean} forceUpdate
     * @returns {void}
     */
    resizeThumbnailsForTileView(width, height, forceUpdate = false) {
        const thumbs = this._getThumbs(!forceUpdate);
        const avatarSize = height / 2;

        if (thumbs.localThumb) {
            thumbs.localThumb.css({
                'padding-top': '',
                height: `${height}px`,
                'min-height': `${height}px`,
                'min-width': `${width}px`,
                width: `${width}px`
            });
        }

        if (thumbs.remoteThumbs) {
            thumbs.remoteThumbs.css({
                'padding-top': '',
                height: `${height}px`,
                'min-height': `${height}px`,
                'min-width': `${width}px`,
                width: `${width}px`
            });
        }
        // diff
        // $('.avatar-container').css({
        thumbs.remlocThumbs.find('.avatar-container').css({
            height: `${avatarSize}px`,
            width: `${avatarSize}px`
        });
    },

    /**
     * Resizes thumbnails for horizontal view.
     *
     * @param {Object} dimensions - The new dimensions of the thumbnails.
     * @param {boolean} forceUpdate
     * @returns {void}
     */
    resizeThumbnailsForHorizontalView({ local = {}, remote = {} }, forceUpdate = false) {
        const thumbs = this._getThumbs(!forceUpdate);

        if (thumbs.localThumb) {
            const { height, width } = local;
            const avatarSize = height / 2;

            thumbs.localThumb.css({
                height: `${height}px`,
                'min-height': `${height}px`,
                'min-width': `${width}px`,
                width: `${width}px`
            });
            $('#localVideoContainer > .avatar-container').css({
                height: `${avatarSize}px`,
                width: `${avatarSize}px`
            });
        }

        if (thumbs.remoteThumbs) {
            const { height, width } = remote;
            const avatarSize = height / 2;

            thumbs.remoteThumbs.css({
                height: `${height}px`,
                'min-height': `${height}px`,
                'min-width': `${width}px`,
                width: `${width}px`
            });
            $('#filmstripRemoteVideosContainer > span > .avatar-container').css({
                height: `${avatarSize}px`,
                width: `${avatarSize}px`
            });
        }
    },

    /**
     * Resizes thumbnails for vertical view.
     *
     * @returns {void}
     */
    resizeThumbnailsForVerticalView() {
        const thumbs = this._getThumbs(true);

        if (thumbs.localThumb) {
            const heightToWidthPercent = 100 / interfaceConfig.LOCAL_THUMBNAIL_RATIO;

            thumbs.localThumb.css({
                'padding-top': `${heightToWidthPercent}%`,
                width: '',
                height: '',
                'min-width': '',
                'min-height': ''
            });
            $('#localVideoContainer > .avatar-container').css({
                height: '50%',
                width: `${heightToWidthPercent / 2}%`
            });
        }

        if (thumbs.remoteThumbs) {
            const heightToWidthPercent = 100 / interfaceConfig.REMOTE_THUMBNAIL_RATIO;

            thumbs.remoteThumbs.css({
                'padding-top': `${heightToWidthPercent}%`,
                width: '',
                height: '',
                'min-width': '',
                'min-height': ''
            });
            $('#filmstripRemoteVideosContainer > span > .avatar-container').css({
                height: '50%',
                width: `${heightToWidthPercent / 2}%`
            });
        }
    },

    /**
     * Returns thumbnails of the filmstrip
     * @param onlyVisible
     * @returns {object} thumbnails
     */
    _getThumbs_orig(onlyVisible = false) {
        let selector = 'span';

        if (onlyVisible) {
            selector += ':visible';
        }

        const localThumb = $('#localVideoContainer');
        const remoteThumbs = $('#filmstripRemoteVideosContainer').children(selector);

        // Exclude the local video container if it has been hidden.
        if (localThumb.hasClass('hidden')) {
            return { remoteThumbs };
        }

        return { remoteThumbs,
            localThumb };

    },
    _getThumbs_works(onlyVisible = false) {
        // let selector = 'span';

        // console.log("crnr flm getThumbs",!!(window.log_tb))
        // console.log("crnr flm getThumbs",this,this.filmstripRemoteVideos)
        // window.log_tb ? log_tb(new Error(),"getThumbs") : 0
        

        // console.trace("getThumbs_tb")
        let selector = '.remote_vid,.pseudo_vid';
        selector = window.glob_sel || selector;
        let filter = '';

        if (onlyVisible) {
            filter += ':visible';
        }

        const localThumb = $('#localVideoContainer');
        // const remoteThumbs = this.filmstripRemoteVideos.children(selector);
        // const remoteThumbs = this.filmstripRemoteVideos.find(selector);
        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).filter(filter) : filmstripRemoteVideos.find(selector);
        // const remoteThumbs = filter ? filmstripRemoteVideos.find(selector).children(filter) : filmstripRemoteVideos.children(selector);
        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);

        // Exclude the local video container if it has been hidden.
        if (localThumb.hasClass('hidden')) {
            return { remoteThumbs };
        }

        return { remoteThumbs,
            localThumb };

    },



    // _getThumbs_buggy(onlyVisible = false) {
    _getThumbs(onlyVisible = false) {
        let selector = '.remote_vid,.pseudo_vid';
        selector = window.glob_sel || selector;
        let filter = '';

        if (onlyVisible) {
            filter += ':visible';
        }

        const filmstripRemoteVideos =  $('#filmstripRemoteVideosContainer')
        const localThumb = $("#filmstripRemoteVideosContainer > #localVideoTileViewContainer,#filmstripLocalVideoThumbnail").children('#localVideoContainer');

        const remoteThumbs = filter ? filmstripRemoteVideos.children(selector).filter(filter) : filmstripRemoteVideos.children(selector);

        // Exclude the local video container if it has been hidden.
        if (localThumb.hasClass('hidden')  || ! localThumb.length )  {
            return { remoteThumbs,remlocThumbs:remoteThumbs };
        }

        return { remoteThumbs,
            localThumb,remlocThumbs:remoteThumbs.add(localThumb) };


    },

};

export default Filmstrip;