VK App web fullscreen button

PanelHeaderWithFullScreen.js

import React from 'react';
import { PanelHeader, HeaderButton } from '@vkontakte/vkui';

import Icon24Fullscreen from '@vkontakte/icons/dist/24/fullscreen';
import Icon24FullscreenExit from '@vkontakte/icons/dist/24/fullscreen_exit';

class PanelHeaderInternal extends PanelHeader {
  get webviewType () {
    return window.isWeb ? 'internal' : 'vkapps';
  }
}

class PanelHeaderWithFullScreen extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fullScreenEnabled: false,
      listener: null
    };
  }

  fullScreenUpdate() {
    const fullScreenEnabled = !!document.fullscreenElement;
    this.setState({ fullScreenEnabled });
  }

  fullScreenToggle() {
    const self = PanelHeaderWithFullScreen;
    if (!document.fullscreenElement) {
      self.openFullscreen(document.documentElement);
    } else {
      self.closeFullscreen();
    }
    this.fullScreenUpdate();
  }

  static openFullscreen() {
    var elem = document.body;
    if (elem.requestFullscreen) {
      elem.requestFullscreen();
    } else if (elem.mozRequestFullScreen) { /* Firefox */
      elem.mozRequestFullScreen();
    } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
      elem.webkitRequestFullscreen();
    } else if (elem.msRequestFullscreen) { /* IE/Edge */
      elem.msRequestFullscreen();
    }
  }

  static closeFullscreen() {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.mozCancelFullScreen) { /* Firefox */
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
      document.webkitExitFullscreen();
    } else if (document.msExitFullscreen) { /* IE/Edge */
      document.msExitFullscreen();
    }
  }

  componentDidMount() {
    const listener = () => this.fullScreenUpdate();
    this.setState({ listener });
    window.addEventListener('fullscreenchange', listener);
  }

  componentWillUnmount() {
    window.removeEventListener('fullscreenchange', this.state.listener);
    delete this.state.listener;
  }

  render() {
    const props = this.props;
    return (
      <PanelHeaderInternal
        right={
          <HeaderButton onClick={() => this.fullScreenToggle()}>
            { this.state.fullScreenEnabled ? (
              <Icon24FullscreenExit/>
            ) : (
              <Icon24Fullscreen/>
            )}
          </HeaderButton>
        }
        {...props}
      />
    )
  }
}

export default PanelHeaderWithFullScreen;