Skip to content

Commit

Permalink
fix: pixelation issues on some devices (#17)
Browse files Browse the repository at this point in the history 
fix: weird camera aspect stretching when rotating devices
fix: pseudo fullscreen on iOS
fix: allow the player to start in cardboard mode
  • Loading branch information
@brandonocasey
brandonocasey authored Aug 11, 2017
1 parent d3e45ad commit 6f09814
Show file tree
Hide file tree
Showing 2 changed files with 58 additions and 29 deletions.
26 changes: 23 additions & 3 deletions src/cardboard-button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ class CardboardButton extends Button {
this.handleVrDisplayActivate_ = videojs.bind(this, this.handleVrDisplayActivate_);
this.handleVrDisplayDeactivate_ = videojs.bind(this, this.handleVrDisplayDeactivate_);
this.handleVrDisplayPresentChange_ = videojs.bind(this, this.handleVrDisplayPresentChange_);
this.handleOrientationChange_ = videojs.bind(this, this.handleOrientationChange_);
window.addEventListener('orientationchange', this.handleOrientationChange_);
window.addEventListener('vrdisplayactivate', this.handleVrDisplayActivate_);
window.addEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_);

Expand Down Expand Up @@ -46,14 +48,25 @@ class CardboardButton extends Button {
}
}

handleOrientationChange_() {
if (this.active_ && videojs.browser.IS_IOS) {
this.changeSize_();
}
}

changeSize_() {
this.player_.width(window.innerWidth);
this.player_.height(window.innerHeight);
window.dispatchEvent(new window.Event('resize'));
}

handleVrDisplayActivate_() {
// we mimic fullscreen on IOS
if (videojs.browser.IS_IOS) {
this.oldWidth_ = this.player_.currentWidth();
this.oldHeight_ = this.player_.currentHeight();
this.player_.width(window.innerWidth);
this.player_.height(window.innerHeight);
window.dispatchEvent(new window.Event('resize'));
this.player_.enterFullWindow();
this.changeSize_();
}

this.active_ = true;
Expand All @@ -68,6 +81,7 @@ class CardboardButton extends Button {
if (this.oldHeight_) {
this.player_.height(this.oldHeight_);
}
this.player_.exitFullWindow();
window.dispatchEvent(new window.Event('resize'));
}

Expand All @@ -78,6 +92,12 @@ class CardboardButton extends Button {
// if cardboard mode display is not active, activate it
// otherwise deactivate it
if (!this.active_) {
// This starts playback mode when the cardboard button
// is clicked on Andriod. We need to do this as the controls
// disappear
if (!this.player_.hasStarted() && videojs.browser.IS_ANDROID) {
this.player_.play();
}
window.dispatchEvent(new window.Event('vrdisplayactivate'));
} else {
window.dispatchEvent(new window.Event('vrdisplaydeactivate'));
Expand Down
61 changes: 35 additions & 26 deletions src/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,6 @@ class VR extends Plugin {

this.handleVrDisplayActivate_ = videojs.bind(this, this.handleVrDisplayActivate_);
this.handleVrDisplayDeactivate_ = videojs.bind(this, this.handleVrDisplayDeactivate_);
this.handleRotate_ = videojs.bind(this, this.handleRotate_);
this.handleResize_ = videojs.bind(this, this.handleResize_);
this.animate_ = videojs.bind(this, this.animate_);

Expand Down Expand Up @@ -284,24 +283,6 @@ class VR extends Plugin {
this.vrDisplay.exitPresent();
}

handleRotate_() {
const screen = window.screen;

if (window.orientation === -90 || window.orientation === 90) {
// in iOS, width and height never changes regardless orientation
// so when in a horizontal mode, height still greater than width
if (screen.height > screen.width) {
this.camera.aspect = screen.height / screen.width;
} else {
// in Android, width and height will swap value depending on orientation
this.camera.aspect = screen.width / screen.height;
}
} else {
this.camera.aspect = screen.width / screen.height;
}
this.camera.updateProjectionMatrix();
}

togglePlay_() {
if (this.player_.paused()) {
this.player_.play();
Expand Down Expand Up @@ -359,7 +340,7 @@ class VR extends Plugin {
const width = this.player_.currentWidth();
const height = this.player_.currentHeight();

this.effect.setSize(width, height);
this.effect.setSize(width, height, false);
this.camera.aspect = width / height;
this.camera.updateProjectionMatrix();
}
Expand Down Expand Up @@ -487,10 +468,10 @@ class VR extends Plugin {
antialias: true
});

this.renderer.setSize(this.player_.currentWidth(), this.player_.currentHeight());
this.renderer.setSize(this.player_.currentWidth(), this.player_.currentHeight(), false);
this.effect = new VREffect(this.renderer);

this.effect.setSize(this.player_.currentWidth(), this.player_.currentHeight());
this.effect.setSize(this.player_.currentWidth(), this.player_.currentHeight(), false);
this.vrDisplay = null;

// Previous timestamps for gamepad updates
Expand All @@ -500,8 +481,34 @@ class VR extends Plugin {

this.renderedCanvas = this.renderer.domElement;

this.renderedCanvas.style.width = 'inherit';
this.renderedCanvas.style.height = 'inherit';
const debounce = function(fn, wait) {
let timeout;

return function(...args) {
// reset the timer
if (timeout) {
window.clearTimeout(timeout);
}
timeout = window.setTimeout(() => fn.apply(undefined, args), wait);
};
};
// we use this to stop webvr-polyfill from making the canvas take up more
// space then the video element
const setInherit = debounce((mut) => {
if (this.observer_) {
this.observer_.disconnect();
} else {
this.observer_ = new window.MutationObserver(setInherit);
}
this.renderedCanvas.setAttribute('style', 'width: inherit; height: inherit;');
this.handleResize_();
this.observer_.observe(this.renderedCanvas, {
attributes: true,
attributeList: ['style']
});
}, 10);

setInherit();

this.player_.el().insertBefore(this.renderedCanvas, this.player_.el().firstChild);
this.getVideoEl_().style.display = 'none';
Expand All @@ -527,7 +534,6 @@ class VR extends Plugin {
window.addEventListener('resize', this.handleResize_, true);
window.addEventListener('vrdisplayactivate', this.handleVrDisplayActivate_, true);
window.addEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_, true);
window.addEventListener('orientationchange', this.handleRotate_, false);

this.animate_();
this.initialized_ = true;
Expand All @@ -553,7 +559,6 @@ class VR extends Plugin {
window.removeEventListener('vrdisplaypresentchange', this.handleResize_);
window.removeEventListener('vrdisplayactivate', this.handleVrDisplayActivate_);
window.removeEventListener('vrdisplaydeactivate', this.handleVrDisplayDeactivate_);
window.removeEventListener('orientationchange', this.handleRotate_);

// re-add the big play button to player
if (!this.player_.getChild('BigPlayButton')) {
Expand All @@ -580,6 +585,10 @@ class VR extends Plugin {
// set the current projection to the default
this.currentProjection_ = this.defaultProjection;

if (this.observer_) {
this.observer_.disconnect();
}

// remove the old canvas
if (this.renderedCanvas) {
this.renderedCanvas.parentNode.removeChild(this.renderedCanvas);
Expand Down

0 comments on commit 6f09814

Please sign in to comment.