Ionic native Screen Orientation plugin not working

meatloaf4 · June 22, 2017, 12:25am

I have tried pretty much everything to get this plugin to work after the update to ionic 3.4 but nothing seems to work.

What I have tried so far.

Updating the plugin to version 2.0.1
Updating cordova to version 7.0.1
Removing node_modules and reinstalling
cleaning via npm clean

here is my ionic info below

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : android 5.2.2 browser 4.1.0
    Ionic Framework                 : ionic-angular 3.4.0

System:

    Node       : v6.11.0
    OS         : Windows 10
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed
    npm        : 5.0.3

Along with my package.json

 {
    "name": "ionic-hello-world",
    "author": "Ionic Framework",
    "homepage": "http://ionicframework.com/",
    "private": true,
    "scripts": {
        "clean": "ionic-app-scripts clean",
        "build": "ionic-app-scripts build",
        "ionic:build": "ionic-app-scripts build",
        "ionic:serve": "ionic-app-scripts serve"
    },
    "dependencies": {
        "@angular/animations": "4.1.3",
        "@angular/common": "4.1.3",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "4.1.3",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@ionic-native/core": "3.12.1",
        "@ionic-native/in-app-purchase": "3.12.1",
        "@ionic-native/screen-orientation": "^3.12.1",
        "@ionic-native/social-sharing": "3.12.1",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "@types/lodash": "ts2.2",
        "cordova-plugin-console": "^1.0.7",
        "cordova-plugin-device": "^1.1.6",
        "cordova-plugin-inapppurchase": "^1.1.0",
        "cordova-plugin-screen-orientation": "2.0.0",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.3",
        "cordova-plugin-whitelist": "^1.3.2",
        "cordova-plugin-x-socialsharing": "^5.1.8",
        "ionic-angular": "3.4.0",
        "ionic-plugin-keyboard": "^2.2.1",
        "ionicons": "3.0.0",
        "lodash": "^4.17.2",
        "moment": "^2.17.1",
        "rxjs": "5.4.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "1.3.7",
        "@ionic/cli-plugin-cordova": "1.4.0",
        "@ionic/cli-plugin-ionic-angular": "1.3.1",
        "typescript": "2.3.4"
    },
    "cordovaPlugins": [
        "cordova-plugin-device",
        "cordova-plugin-console",
        "cordova-plugin-whitelist",
        "cordova-plugin-splashscreen",
        "cordova-plugin-statusbar",
        "ionic-plugin-keyboard"
    ],
    "cordovaPlatforms": [],
    "description": "ShareHisWords: An Ionic project",
    "cordova": {
        "plugins": {
            "cordova-plugin-screen-orientation": {},
            "cordova-plugin-inapppurchase": {},
            "cordova-plugin-x-socialsharing": {},
            "cordova-plugin-console": {},
            "cordova-plugin-device": {},
            "cordova-plugin-splashscreen": {},
            "cordova-plugin-statusbar": {},
            "cordova-plugin-whitelist": {},
            "ionic-plugin-keyboard": {}
        }
    }
}

Any help would be greatly appreciated. What I can say is that the plugin worked before I made the jump to the new version of Ionic.

P.S. the plugin is registered as a provider inside my app.module.ts

Sujan12 · June 22, 2017, 6:08pm

Upgrade you @ionic/app-scripts to 1.3.8 please, this works better with npm5 on Windows.
If this is not enough, show us how exactly you implemented the plugin in your code.

meatloaf4 · June 22, 2017, 7:54pm

Went ahead and did as you suggested and still the plugin doesn’t seem to be working. Below is my code.

import { Component } from '@angular/core';
import { NavParams} from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { VideoQuality, Quality } from "../../models/video-model";
import {Observable} from "rxjs/Observable";
declare const MediaElementPlayer: any;
declare const Hls: any;
declare const $: any;
@Component({
  selector: 'modal-video-player',
  templateUrl: 'video-player.html'
})
export class VideoPlayerModal {

  private videoURLs: Map<VideoQuality, string> = new Map<VideoQuality, string>();
  private videoPoster: Map<Quality, string> = new Map<Quality, string>();
  private mediaElementPlayer: any;

  constructor(public params: NavParams,
              private domSanitizer: DomSanitizer,
              private statusBar: StatusBar,
              private screenOrientation: ScreenOrientation) {
    this.videoURLs = params.get("videoURL");
    this.videoPoster = params.get("posterURL");
  }

  //== Angular Callback =====================================

  ionViewDidLoad(){

    this.statusBar.hide();
    this.screenOrientation.lock(this.screenOrientation.ORIENTATIONS.LANDSCAPE);

    this.mediaElementPlayer = new MediaElementPlayer("hisWordPlayer", {
      renderers: ['native_hls', 'html5'],
      showPosterWhenEnded: true,
      videoWidth: "100%",
      videoHeight: "100%",
      alwaysShowControls: false,
      AndroidUseNativeControls: false,
      startingSource: this.videoURLs.get(VideoQuality.HLS),
      displayType: false,           //Should we display the type ( like this ) in the source chooser
      disableHoverEvents: true,
      hls:{
        debug: false,
        autoStartLoad: true
      },

      features: ["playpause", "progress", "current", "fullscreen", "sourcechooser"],

      success: function(media, node){
        //Autoplay
        media.play();
      }
    });

    this.mediaElementPlayer.container.addEventListener("enteredfullscreen", function(){
      //this.screenOrientation.lock('landscape');
      console.log("enter fullscreen");
    });
    this.mediaElementPlayer.container.addEventListener("exitedfullscreen", function(){
      //this.screenOrientation.unlock();
      console.log("exit fullscreen")
    });

    this.screenOrientation.onChange = this.screenOrientationChanged;
  }

  public screenOrientationChanged() : Observable<void>{
    console.log(this.screenOrientation.type);
    return new Observable<void>();
  }

  //== Ionic Callback =====================================

  ionViewWillLeave(){
    this.mediaElementPlayer.pause();
    this.mediaElementPlayer.remove();

  }
  ionViewWillUnload(){
    console.log("unloading");
    this.statusBar.show();

  }

  public videoURL(videoQuality: VideoQuality){
    return this.domSanitizer.bypassSecurityTrustUrl(this.videoURLs.get(videoQuality));
  }

  public posterURL(quality: Quality){
    return this.domSanitizer.bypassSecurityTrustUrl(this.videoPoster.get(quality));
  }

}

meatloaf4 · June 23, 2017, 4:45pm

I was able to get it working! It looks like despite the fact that I tried updating / removing and reinstalling the cordova plugin it was not pulling the latest version in (2.0.1). Once I was able to actually get it installed the error seemed to be resolved.

A quick side note. The current version of the cordova-plugin-screen-orientation plugin is broken due to the fact that its relying on a dependency that cannot be accessed ( for whatever reason ). There is a pull-request for a fix out though currently but it has not yet been merged into master. The way I was able to get this working is I just installed the plugin directly from the fixed fork branch instead of the main.

TLDR: If you are having problems with the cordova-plugin-screen-orientation plugin try below

ionic cordova plugin remove cordova-plugin-screen-orientation.
ionic cordova plugin add cordova-plugin-screen-orientation@latest
If the above fails with this error Error: Failed to fetch plugin https://github.com/vstirbu/PromisesPlugin.git via registry. Contine below, otherwise you should be good
ionic cordova plugin remove cordova-plugin-screen-orientation.
cordova plugin add https://github.com/Exilz/cordova-plugin-screen-orientation.git --save
Now you should be good

Hopefully this helps someone!

P.S. Ensure after the above steps that you have installed the latest ionic/native screen-orientation plugin using…

npm rm @ionic-native/screen-orientation
npm install --save @ionic-native/screen-orientation@latest

SigmundFroyd · June 23, 2017, 5:22pm

One side note, you should pretty much never write function, particularly for callbacks.

So I’d suggest updating them to use fat arrows, e.g.
success: function(media, node) {
becomes
success: (media, node) => {

meatloaf4 · June 23, 2017, 5:50pm

Awesome thanks for the suggestion! My knowledge of javascript pales in comparison to my knowledge in other languages. Mind explaining why this is the case?

P.S. While lock and unlock now work perfect I can’t seem to get the onChange method working. Does anyone else seem to be having this problem?

Thanks in advance!

meatloaf4 · June 23, 2017, 6:03pm

Got the onChange to work as well. I saw that it was returning an observable. Check the below code.

    this.screenOrientation.onChange().subscribe(
      () => {
        console.log("Changed");
      }
    );

SigmundFroyd · June 23, 2017, 6:20pm

So, this is a weird concept in Javascript. this merely refers to the calling context at any given point. Which means that if you define function hai(isGenuine: boolean) { ... }
…and you call hai(true);, depending on where you call it this may or may not actually refer to your class.

For example, If you were to do
setTimeout(function() { hai(false); }, 1000};

this would refer to the window object. Which of course is not what you want.

So, then Typescript comes along and starts introducing classes, and says hey…"this" whole thing has become a problem. So they introduce fat arrows, which in short properly maintains the concept of this to always refer to your class. Even if you do
setTimeout(() => { hai(false; }, 1000};
this will still refer to your class.

Hopefully that makes sense. I don’t feel like I’ve gotten any better conveying all of this in a succinct and explanatory manner .

For more information you can look here: Arrow Functions.

meatloaf4 · June 23, 2017, 6:34pm

Awesome actually that does help.

My javascript isn’t great but i’m decent enough with the language now that I actually understand what you are talking about.

Essentially it seems that by using fat arrow syntax the scoping rules are much more predictable. Is that fair to say?

Thanks for taking the time to break that down for me

SigmundFroyd · June 23, 2017, 6:56pm

I think that’s a fair way to view it.

Just for full disclosure though, from a technical standpoint “scope” is a different concept. It’s why we have let in Typescript.

glu · February 5, 2020, 1:54pm

This was my last resort but it actually made it work for me. Just one note: “@latest” threw me an error, but without it was fine too, and now everything works. So really simply just:

ionic cordova plugin remove cordova-plugin-screen-orientation.
ionic cordova plugin add cordova-plugin-screen-orientation

Topic		Replies	Views
Cordova plugin screen orientation not work with Android -- need help Ionic Native	0	923	July 26, 2017
Screen Orientation plugin Ionic Native	4	2015	June 29, 2017
ScreenOrientation not working in Ionic View ionic-v3	1	1239	February 16, 2017
Screen Orientation Native Plugin ionic-v3	4	993	August 23, 2016
ScreenOrientation problems Ionic Native	6	1854	April 3, 2020

Ionic native Screen Orientation plugin not working

Related topics