From f9b12bd53018d967bb305f02725834a98f20f61f Mon Sep 17 00:00:00 2001
From: Huong Nguyen <huongnv13@gmail.com>
Date: Fri, 3 Sep 2021 09:13:30 +0700
Subject: [PATCH] Fix bugs for iPhoneOS

---
 package-lock.json |  4 ++--
 package.json      |  2 +-
 src/plugin.js     | 36 +++++++++++++++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b919236..e5c8155 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "videojs-ogvjs",
-  "version": "1.0.0",
+  "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "videojs-ogvjs",
-      "version": "1.0.0",
+      "version": "0.1.0",
       "license": "MIT",
       "dependencies": {
         "ogv": "^1.8.4",
diff --git a/package.json b/package.json
index e842948..c807689 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "videojs-ogvjs",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Ogv.jv Tech plugin for Video.JS",
   "main": "dist/videojs-ogvjs.cjs.js",
   "module": "dist/videojs-ogvjs.es.js",
diff --git a/src/plugin.js b/src/plugin.js
index 2ded9fd..86b2d16 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -4,6 +4,11 @@ import OGVLoader from 'OGVLoader';
 import OGVPlayer from 'OGVPlayer';
 const Tech = videojs.getComponent('Tech');
 
+const androidOS = 'Android';
+const iPhoneOS = 'iPhoneOS';
+const iPadOS = 'iPadOS';
+const otherOS = 'Other';
+
 /**
  * Object.defineProperty but "lazy", which means that the value is only set after
  * it retrieved the first time, rather than being set right away.
@@ -37,6 +42,25 @@ const defineLazyProperty = function(obj, key, getValue, setter = true) {
   return Object.defineProperty(obj, key, options);
 };
 
+/**
+ * Get the device's OS.
+ *
+ * @return {string} Device's OS.
+ */
+const getDeviceOS = function() {
+  /* global navigator */
+  const ua = navigator.userAgent;
+
+  if (/android/i.test(ua)) {
+    return androidOS;
+  } else if (/iPad|iPhone|iPod/.test(ua)) {
+    return iPhoneOS;
+  } else if ((navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
+    return iPadOS;
+  }
+  return otherOS;
+};
+
 /**
  * OgvJS Media Controller - Wrapper for ogv.js Media API
  *
@@ -61,6 +85,13 @@ class OgvJS extends Tech {
     OgvJS.setIfAvailable(this.el_, 'preload', options.preload);
 
     this.on('loadedmetadata', function() {
+      if (getDeviceOS() === iPhoneOS) {
+        // iPhoneOS add some inline styles to the canvas, we need to remove it.
+        const canvas = this.el_.getElementsByTagName('canvas')[0];
+
+        canvas.style.removeProperty('width');
+        canvas.style.removeProperty('margin');
+      }
       this.triggerReady();
     });
   }
@@ -213,7 +244,7 @@ class OgvJS extends Tech {
    * @method setVolume
    */
   setVolume(percentAsDecimal) {
-    if (this.el_.hasOwnProperty('volume')) {
+    if (getDeviceOS() !== iPhoneOS && this.el_.hasOwnProperty('volume')) {
       this.el_.volume = percentAsDecimal;
     }
   }
@@ -596,6 +627,9 @@ OgvJS.canPlaySource = function(srcObj) {
  * @return {boolean} True if volume can be controlled.
  */
 OgvJS.canControlVolume = function() {
+  if (getDeviceOS() === iPhoneOS) {
+    return false;
+  }
   const p = new OGVPlayer();
 
   return p.hasOwnProperty('volume');