Panolens fullscreen

29/05/2019 #panolens #WebVR #360VR

크롬에서 전체화면이 안돼요.

역시 테스트 서버에서 기능을 테스트하고 받은 내용이다. 크롬에서 전체화면 버튼을 누르면 F11처럼 전체화면이 되었다가 1~2초 후에 다시 풀린다는 내용이다.

자리에서 테스트를 해보니 정말로 1~2초 후에 전체화면이 풀렸다. w1 바로 검색을 해보니까 다양한 이유로 전체화면이 안될 수 있다는 것을 알았다. 사용자의 크롬 설정에 따라서 전체화면이 동작하지 않을 수 있다는 것인데. 이것은 서버에서 처리할 수 없는 부분이었다. 관련링크: https://windowsreport.com/google-chromes-full-screen-option-doesnt-fill-screen-fix/

그럼 전체화면 어떻게?

“이런 이유 때문에 전체화면은 저희가 처리 못해요.” 라고만 하고 끝나면 아마 순식간에 역적으로 몰릴 것이다. 그럼 어떻게 처리 할 것인가? 생각해보면 전체화면을 처리하는 부분이 있고 이 부분을 커스터마이징하면 된다. 먼저 Widget의 생성자를 따라가 봤다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/**
 * Widget for controls
 * @constructor
 * @param {HTMLElement} container - A domElement where default control widget will be attached to
 */
PANOLENS.Widget = function ( container ) {
 
    THREE.EventDispatcher.call( this );
 
    this.DEFAULT_TRANSITION  = 'all 0.27s ease';
    this.TOUCH_ENABLED = PANOLENS.Utils.checkTouchSupported();
    this.PREVENT_EVENT_HANDLER = function ( event ) {
        event.preventDefault();
        event.stopPropagation();
    };
 
    this.container = container;
 
    this.barElement;
    this.fullscreenElement;
    this.videoElement;
    this.settingElement;
 
    this.mainMenu;
 
    this.activeMainItem;
    this.activeSubMenu;
    this.mask;
 
}
cs

딱 fullscreenElement 변수를 따라가니 어렵지 않게 this.createFullscreenButton(); 전체화면을 만드는 함수를 찾을 수 있었다.

createFullscreenButton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/**
 * Create Fullscreen button
 * @return {HTMLSpanElement} - The dom element icon for fullscreen
 * @fires PANOLENS.Widget#panolens-viewer-handler
 */
PANOLENS.Widget.prototype.createFullscreenButton = function () {
 
    var scope = this, item, isFullscreen = false, tapSkipped = true, stylesheetId;
 
    stylesheetId = 'panolens-style-addon';
 
    // Don't create button if no support
    if ( !document.fullscreenEnabled       && 
         !document.webkitFullscreenEnabled &&
         !document.mozFullScreenEnabled    &&
         !document.msFullscreenEnabled ) {
        return;
    }
 
    function onTap ( event ) {
 
        event.preventDefault();
        event.stopPropagation();
 
        tapSkipped = false;
 
        if ( !isFullscreen ) {
            
            scope.container.requestFullscreen && scope.container.requestFullscreen();            //크롬
            scope.container.msRequestFullscreen && scope.container.msRequestFullscreen();        //익스플로러 
            scope.container.mozRequestFullScreen && scope.container.mozRequestFullScreen();        //파이어폭스
            scope.container.webkitRequestFullscreen && scope.container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
            isFullscreen = true;
        } else {
            document.exitFullscreen && document.exitFullscreen();                    //크롬
            document.msExitFullscreen && document.msExitFullscreen();                //익스플로러
            document.mozCancelFullScreen && document.mozCancelFullScreen();            //파이어폭스
            document.webkitExitFullscreen && document.webkitExitFullscreen();
            isFullscreen = false;
        }
 
        this.style.backgroundImage = ( isFullscreen ) 
            ? 'url("' + PANOLENS.DataImage.FullscreenLeave + '")' 
            : 'url("' + PANOLENS.DataImage.FullscreenEnter + '")';
 
    }
 
    function onFullScreenChange (e) {
    
        if ( tapSkipped ) {
 
            isFullscreen = !isFullscreen; 
 
            item.style.backgroundImage = ( isFullscreen ) 
            ? 'url("' + PANOLENS.DataImage.FullscreenLeave + '")' 
            : 'url("' + PANOLENS.DataImage.FullscreenEnter + '")';
 
        }
 
        /**
         * Viewer handler event
         * @type {object}
         * @property {string} method - 'onWindowResize' function call on PANOLENS.Viewer
         */
        scope.dispatchEvent( { type: 'panolens-viewer-handler', method: 'onWindowResize', data: false } );
 
        tapSkipped = true;
 
    }
 
    document.addEventListener( 'fullscreenchange', onFullScreenChange, false );
    document.addEventListener( 'webkitfullscreenchange', onFullScreenChange, false );
    document.addEventListener( 'mozfullscreenchange', onFullScreenChange, false );
    document.addEventListener( 'MSFullscreenChange', onFullScreenChange, false );
 
    item = this.createCustomItem( { 
 
        style : { 
 
            backgroundImage : 'url("' + PANOLENS.DataImage.FullscreenEnter + '")' 
 
        },
 
        onTap : onTap
 
    } );
 
    // Add fullscreen stlye if not exists
    if ( !document.querySelector( stylesheetId ) ) {
        var sheet = document.createElement( 'style' );
        sheet.id = stylesheetId;
        sheet.innerHTML = ':-webkit-full-screen { width: 100% !important; height: 100% !important }';
        document.body.appendChild( sheet );
    }
    
    return item;
 
};
cs

여기서 전체화면의 버튼을 브라우저에 맞게 이벤트를 실행하고 있다. 나중에 서비스 팀에서 전체화면 기능을 커스터마이징을 여기서해야한다.

브라우저 구분

1
2
3
4
5
6
7
8
9
10
11
12
13
if ( !isFullscreen ) {
    scope.container.requestFullscreen && scope.container.requestFullscreen();                                            //크롬 반응
    scope.container.msRequestFullscreen && scope.container.msRequestFullscreen();                                        //익스플로러 반응 
    scope.container.mozRequestFullScreen && scope.container.mozRequestFullScreen();                                        //파이어폭스 반응
    scope.container.webkitRequestFullscreen && scope.container.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);    //크롬,엣지 반응
    isFullscreen = true;    //전체화면 플레그
} else {
    document.exitFullscreen && document.exitFullscreen();                    //크롬 반응
    document.msExitFullscreen && document.msExitFullscreen();                //익스플로러 반응
    document.mozCancelFullScreen && document.mozCancelFullScreen();            //파이어폭스 반응
    document.webkitExitFullscreen && document.webkitExitFullscreen();        //크롬,엣지 반응
    isFullscreen = false;
}
cs

위와 같이 브라우저에서 반응을 한다.

크기 조절하기

w2 Widget 관련해서 버튼 만드는 부분을 더 분석해서 녹여봐야겠다.