React JS Toggle 2d and 3d (360 View)

[ineffablep]

Description

I am trying to create videojs-vr in React JS , This is working fine in 360 View but I want to add a toggle button allow user to change 2D view or 360 View or any other Projection View.

I tried the code as suggested in issues, but it's not working.

Steps to reproduce. - CODE

import React from "react";
import videojs from "video.js";
import Omnitone from 'omnitone/build/omnitone.min.esm';
import 'videojs-vr';

const VrPlayer = ({ src, poster, sourceList }) => {
    const playerRef = React.useRef(null);
    let type = "video/mp4";
    if (src && src.includes('mpd')) {
        type = "application/dash+xml";
    }
    if (src && src.includes('m3u8')) {
        type = "application/x-mpegURL"
    }
    const videoJsOptions = { // lookup the options in the docs for more options
        autoplay: true,
        controls: true,
        responsive: true,
        poster,
        fluid: true,
        sources: sourceList ? sourceList : [{ src, type }]
    };
    const handlePlayerReady = (player) => {
        playerRef.current = player;
        // you can handle player events here
        player.on('waiting', () => {
            console.log('player is waiting');
        });

        player.on('dispose', () => {
            console.log('player will dispose');
        });
    };
    return (<VideoJS options={videoJsOptions} onReady={handlePlayerReady} />);
};
const VideoJS = ({ options, onReady }) => {

    const videoRef = React.useRef(null);
    const playerRef: any = React.useRef(null);
    React.useEffect(() => {
        // make sure Video.js player is only initialized once
        if (!playerRef.current) {
            const videoElement = videoRef.current;
            if (!videoElement) return;
            const player: any = playerRef.current = videojs(videoElement, options, () => {
                player.mediainfo = player.mediainfo || {};
                player.mediainfo.projection = '360';
                player.vr({
                    projection: 'AUTO',
                    debug: false,
                    forceCardboard: false,
                    omnitone: Omnitone,
                    omnitoneOptions: {}
                });
                var toggle = player.controlBar.addChild('Component', {}, 0); // 3rd arg is index, i.e. first
                toggle.addClass("my-image");
// toggle code to 2d and 3d
                toggle.on('click', () => {
                    player.mediainfo = player.mediainfo || {};
                    player.mediainfo.projection = 'NONE';
                    player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
                    player.play();
                })
                onReady && onReady(player);
            });
        }
    }, [onReady, options]);

    // Dispose the Video.js player when the functional component unmounts
    React.useEffect(() => {
        return () => {
            if (playerRef && playerRef.current) {
                playerRef.current.dispose();
                playerRef.current = null;
            }
        };
    }, []);

    return (
        <div className="video-container ion-margin-vertical" data-vjs-player>
            <video crossOrigin="anonymous" ref={videoRef} className="video-js vjs-big-play-centered" />
        </div>
    );
}

export default VrPlayer;

Results

Not changing to 2d This should toggle from 3d to 2d

      toggle.on('click', () => {
                    player.mediainfo = player.mediainfo || {};
                    player.mediainfo.projection = 'NONE';
                    player.vr({projection: 'AUTO', debug: true, forceCardboard: false});
                    player.play();
                })

Expected

Please describe what you expected to see.

Actual

Toggle between 2d and 3d

versions

"videojs-vr": "^1.8.0"

videojs

"video.js": "^7.15.4"

browsers

Chrome and Safari

[christian-nils]

This issue is a bit old, but here is how I have implemented it:

if (vrActive) {
    this.player.vr({ projection: '360' }).init()
} else {
    this.player.vr({ projection: 'NONE' }).reset()
}

[nasirDoe]

@christian-nils thanks sir

[JuanIrache]

This issue is a bit old, but here is how I have implemented it:

if (vrActive) {
    this.player.vr({ projection: '360' }).init()
} else {
    this.player.vr({ projection: 'NONE' }).reset()
}

This is not working for me on versions 1.8 or 1.10.1. Going from a projection to NONE works, going from NONE to one of the projections does nothing. No errors or any other visible effect.