Ionic native Screen Orientation plugin not working


#1

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


#2

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.


#3

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));
  }

}


#4

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

  1. ionic cordova plugin remove cordova-plugin-screen-orientation.
  2. ionic cordova plugin add cordova-plugin-screen-orientation@latest
  3. 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 :+1:
  4. ionic cordova plugin remove cordova-plugin-screen-orientation.
  5. cordova plugin add https://github.com/Exilz/cordova-plugin-screen-orientation.git --save
  6. Now you should be good :thumbsup:

Hopefully this helps someone!

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

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

#5

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) => {


#6

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!


#7

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");
      }
    );

#8

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 :stuck_out_tongue:.

For more information you can look here: Arrow Functions.


#9

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 :slight_smile:


#10

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.