rafgraph / fscreen Goto Github PK

...to match the spec. Thanks!

Hey, thanks for putting this package together.

I've experienced an issue Safari Desktop 12.4 and 13.1 where I get a black screen when applying the fullscreen on a div element. The element has a video and other elements nested.

Pressing Esc will exit fullscreen and return the element to normal.

Any thoughts on why this might be happening? The supported browsers list suggests that these would supported at least partially, maybe there's something I'm missing?

The same element worked with no issues on Firefox 76 and Chrome 81.

not sure if its possible to prevent this but on interaction with an input element inside a fullscreen container it exits fullscreen because the keyboard has to be brought up. is there an implementation of this not happening or being prevented?

hello!

I develop a React app with material-ui. The material-ui dialog does not appear in fullscreen mode when using fscreen. When I don't use fscreen to switch to fullscreen mode, the dialog open

I'm having issues using this in Safari.

Upon analysis it seems the CSS styles are not getting applied to the full screen elements like they do in other browsers.

i.e. in chrome when I go full screen with an element, the element get's this style applied:

:not(:root):fullscreen {
    object-fit: contain;
    position: fixed !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    left: 0px !important;
    box-sizing: border-box !important;
    min-width: 0px !important;
    max-width: none !important;
    min-height: 0px !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    margin: 0px !important;
}

On Safari the element doesn't get the above styles and therefore the div isn't properly positioned on the screen, although browser does go full screen. Any suggestions for fixing, working around this?

EDIT: fixed by applying the same style to the :-webkit-full-screen pseudoelement.

I.e. I added the following to my stylesheet:

:not(:root):-webkit-full-screen {
  object-fit: contain;
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0px !important;
}

I've used fscreen in a Svelte component to wrap content (e.g., <img />) so that a user can zoom in and out of full screen. I've added a YouTube video to the page (via an iFrame, with allowfullscreen, not wrapped by my component) but once the video has entered and exited full screen mode, the images can no longer be zoomed to full screen, i.e., requestFullscreen() does nothing.

Is there anything that I need to do to make this work?

#hello.
I want my website to trigger full screen mode after a screen orientation change.
But, it says that it requires user gesture.

can you please let me know how to trigger full screen when a device orientation change?
thank you.

This module knows when it can't request or use fullscreen - when vendor is [], but it doesn't expose that value anywhere that a consumer can use. It'd be excellent to expose fullscreen availability.

this is a very useful library. Yet I noticed that in Android Chrome it fails to hide the navigation bar. In order to do that, navigationUI: 'hide' option needs to be provided to requestFullscreen(), but it is not possible to pass through fscreen.

More information on options here

iOS version 10.3.3
Safari version 10.0

As soon as I click the fullscreen button, I get this error:

TypeError: element[vendor[key.requestFullscreen]] is not a function. (In 'element[vendor[key.requestFullscreen]]()', 'element[vendor[key.requestFullscreen]]' is undefined)

This is my code, I don't believe there's something wrong with it:

  requestFullScreen = () => {
    fscreen.requestFullscreen(this.videoRef); // this.videoRef is a reference to the video element
  }

Hello,

as I red on the docs, "your function may vary", depending on the browser version.

I've got a couple different Samsung SmartTV, on which I'd like to have fullscreen for videos: I've got mixed results and found little docs about these browsers, so I'm sharing my findings.

With the script below, I was able to make it work on the older model (F5500), while it doesn't on the newer (ES6710), while the sample page of fscreen couldn't get none of the two on fullscreen.

I'm attaching relevant screenshots, any plan to support such browsers?

`
function setupPlayer(fullScrBtn) {

var isFullscreenAvailable = document.fullscreenEnabled
|| document.mozFullScreenEnabled || document.webkitFullscreenEnabled
|| document.msFullscreenEnabled || false;

if (isFullscreenAvailable) {

	var myEvent = function(e) {
		var fullscreenElement = document.fullscreenElement
				|| document.mozFullScreenElement
				|| document.webkitFullscreenElement
				|| document.msFullscreenElement;
		if (fullscreenElement) {
			// we are now on fullscreen
		} else {
			// we have exit fullscreen mode
		}
	};

	// add event listeners

	// W3C standard
	document.addEventListener('fullscreenchange', myEvent, false);
	// Firefox 10+, Firefox for Android
	document.addEventListener('mozfullscreenchange', myEvent, false);
	// Chrome 15+, Safari 5.1+, Opera 15+, Chrome for Android, Opera Mobile
	// 16+
	document.addEventListener('webkitfullscreenchange', myEvent, false);
	// IE 11+
	document.addEventListener('MSFullscreenChange', myEvent, false);

	// enable button
	// alert(fullScrBtn.disabled);
	fullScrBtn.disabled = false;
	// alert(fullScrBtn.disabled);
}

}

function requestFullScreen(element) {

var el = element || document.documentElement;

var fullscreenElement = document.fullscreenElement
		|| document.mozFullScreenElement
		|| document.webkitFullscreenElement || document.msFullscreenElement;

if (fullscreenElement) {
	if (document.exitFullscreen) {
		// W3C standard
		document.exitFullscreen();
	} else if (document.mozCancelFullScreen) {
		// Firefox 10+, Firefox for Android
		document.mozCancelFullScreen();
	} else if (document.webkitExitFullscreen) {
		// Chrome 20+, Safari 6+, Opera 15+, Chrome for Android, Opera
		// Mobile 16+
		document.webkitExitFullscreen();
	} else if (document.webkitCancelFullScreen) {
		// Chrome 15+, Safari 5.1+
		document.webkitCancelFullScreen();
	} else if (document.msExitFullscreen) {
		// IE 11+
		document.msExitFullscreen();
	}

} else {

	if (el.requestFullscreen) {
		// W3C standard
		el.requestFullscreen();
	} else if (el.mozRequestFullScreen) {
		// Firefox 10+, Firefox for Android
		el.mozRequestFullScreen();
	} else if (el.msRequestFullscreen) {
		// IE 11+
		el.msRequestFullscreen();
	} else if (el.webkitRequestFullscreen) {
		if (navigator.userAgent.indexOf('Safari') != -1
				&& navigator.userAgent.indexOf('Chrome') == -1) {
			// Safari 6+
			el.webkitRequestFullscreen();
		} else {
			// Chrome 20+, Opera 15+, Chrome for Android, Opera Mobile 16+
			el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
		}
	} else if (el.webkitRequestFullScreen) {
		if (navigator.userAgent.indexOf('Safari') != -1
				&& navigator.userAgent.indexOf('Chrome') == -1) {
			// Safari 5.1+
			el.webkitRequestFullScreen();
		} else {
			// Chrome 15+
			el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
		}
	}
}

}
...
`

ue46es6710 - 1 - tv tag

ue46es6710 - 2 - browser name

ue46es6710 - 3 - support prefixed

ue46es6710 - 4 - fscreen failing

ue46es6710 - 5 - fullscreen disabled

ue46f5500 - 1- tv tag

ue46f5500 - 2 - browser name

ue46f5500 - 3 - support prefixed

ue46f5500 - 4 - fscreen failing

ue46f5500 - 5 - fullscreen enabled

ue46f5500 - 6 - fullscreen working

Following the example app and found that on both Safari & Chrome iOS, fscreen.fullscreenEnabled is always false. The native API responds false as well so I don't think it's this package, any ideas on why this is? I am using a local HTTPS react server

I'm trying to reference this on an HTML page, where I'm using javascript and jQuery. The .js file doesn't seem to be syntactically correct Javascript, so I must be missing something. In particular the export and import statements fail when I add them to my js code...

Thanks for the help

For example when I use chrome in android and load https://mdn.mozillademos.org/en-US/docs/Web/CSS/:fullscreen$samples/Example?revision=1312011 I am able to zoom without full screen but not in full screen.
Not a problem with fscreen to full screen api itself

Excellent library, thanks.
The Fullscreen API also supports fullscreenchange event directly on an Element (not just on the Document), it would be great to add this to fscreen, as I believe that is currently missing.

Full screen state isn't detected on Chrome and Firefox when entering full screen mode by using a menu UI.

This isn't actually a bug in fscreen -- seems to be an issue in the browsers.

In Chrome on a Mac you can toggle full screen in the view menu or use ctrl-command-F.

In Chrome on Windows select the rectangle at the right-hand edge of the Zoom menu option.

http://fscreen.rafrex.com/ doesn't detect this change. It's also not reflected in:

document.webkitFullscreenElement => null

It seems some event should be thrown when this happens -- but I can't find any doc describing this alternate path to full screen.

Hello, and thanks for the library

On safari (15.3) on macos (11.6.4), and possibly on ios too, Enabling and disabling fullscreen triggers a "visibilitychange" event. It doesn't on Chrome and Firefox.

I guess it's just a different behavior between vendors, even out of fscreen (I didn't test 😅).
In all case, should fscreen be (and could it be) consistent between vendors?

Thanks

We are using fscreen as our cross-browser solution to make our react app go fullscreen. Its been working very well for us so far but we are running into one browser where it doesn't work, iOS (iPad) Chrome.

We are successfully using it in Chrome, Safari, and Firefox on macOS and Windows. It also works in iOS (ipad) Safari. However, nothing happens when we request fullscreen in Chrome on iOS (ipad).

I haven't come across any documentation as to whether it should be possible to go into fullscreen in Chrome iOS on an iPad. Does anyone know if fscreen is expected to work in Chrome iOS?