videojs-mobile-ui 0.8.0 → 0.9.0-beta.3

package/CHANGELOG.md

@@ -1,34 +1,3 @@
-<a name="0.8.0"></a>
-# [0.8.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.5.3...v0.8.0) (2022-04-13)
-
-### Features
-
-* Add disable options (#33) ([59e5f89](https://github.com/mister-ben/videojs-mobile-ui/commit/59e5f89)), closes [#33](https://github.com/mister-ben/videojs-mobile-ui/issues/33)
-* Add option to lock to landscape when entering fullscreen (#49) ([26c58d4](https://github.com/mister-ben/videojs-mobile-ui/commit/26c58d4)), closes [#49](https://github.com/mister-ben/videojs-mobile-ui/issues/49)
-
-### Bug Fixes
-
-* Detect angle correctly where no window.orientation (#17) ([c85ac35](https://github.com/mister-ben/videojs-mobile-ui/commit/c85ac35)), closes [#17](https://github.com/mister-ben/videojs-mobile-ui/issues/17)
-* Fix typo in iOS orientation (#27) ([7e05afb](https://github.com/mister-ben/videojs-mobile-ui/commit/7e05afb)), closes [#27](https://github.com/mister-ben/videojs-mobile-ui/issues/27)
-* orientation string (#37) ([177f326](https://github.com/mister-ben/videojs-mobile-ui/commit/177f326)), closes [#37](https://github.com/mister-ben/videojs-mobile-ui/issues/37)
-* Remove event listeners on player dispose (#21) ([25c8fb1](https://github.com/mister-ben/videojs-mobile-ui/commit/25c8fb1)), closes [#21](https://github.com/mister-ben/videojs-mobile-ui/issues/21)
-* Split orientation string ([0eebd64](https://github.com/mister-ben/videojs-mobile-ui/commit/0eebd64))
-
-### Chores
-
-* **deps-dev:** bump karma from 6.3.14 to 6.3.16 (#46) ([7bd42f1](https://github.com/mister-ben/videojs-mobile-ui/commit/7bd42f1)), closes [#46](https://github.com/mister-ben/videojs-mobile-ui/issues/46)
-* **deps-dev:** bump karma from 6.3.2 to 6.3.14 (#44) ([ddff196](https://github.com/mister-ben/videojs-mobile-ui/commit/ddff196)), closes [#44](https://github.com/mister-ben/videojs-mobile-ui/issues/44)
-* **deps:** bump engine.io from 4.1.1 to 4.1.2 (#39) ([5031c93](https://github.com/mister-ben/videojs-mobile-ui/commit/5031c93)), closes [#39](https://github.com/mister-ben/videojs-mobile-ui/issues/39)
-* **deps:** bump follow-redirects from 1.14.0 to 1.14.7 (#41) ([6fcbb49](https://github.com/mister-ben/videojs-mobile-ui/commit/6fcbb49)), closes [#41](https://github.com/mister-ben/videojs-mobile-ui/issues/41)
-* **deps:** bump follow-redirects from 1.14.7 to 1.14.8 (#45) ([cf20418](https://github.com/mister-ben/videojs-mobile-ui/commit/cf20418)), closes [#45](https://github.com/mister-ben/videojs-mobile-ui/issues/45)
-* **deps:** bump log4js from 6.3.0 to 6.4.0 (#42) ([f9c69ff](https://github.com/mister-ben/videojs-mobile-ui/commit/f9c69ff)), closes [#42](https://github.com/mister-ben/videojs-mobile-ui/issues/42)
-* **deps:** bump minimist from 1.2.5 to 1.2.6 (#50) ([6faea79](https://github.com/mister-ben/videojs-mobile-ui/commit/6faea79)), closes [#50](https://github.com/mister-ben/videojs-mobile-ui/issues/50)
-* **deps:** bump nanoid from 3.1.22 to 3.2.0 (#43) ([70e3440](https://github.com/mister-ben/videojs-mobile-ui/commit/70e3440)), closes [#43](https://github.com/mister-ben/videojs-mobile-ui/issues/43)
-* **deps:** bump shelljs from 0.8.4 to 0.8.5 (#40) ([bf57915](https://github.com/mister-ben/videojs-mobile-ui/commit/bf57915)), closes [#40](https://github.com/mister-ben/videojs-mobile-ui/issues/40)
-* make video.js a peer dependency (#51) ([1e1ae5d](https://github.com/mister-ben/videojs-mobile-ui/commit/1e1ae5d)), closes [#51](https://github.com/mister-ben/videojs-mobile-ui/issues/51)
-* update dependencies ([6fb5a7b](https://github.com/mister-ben/videojs-mobile-ui/commit/6fb5a7b))
-* Update to Node 14 / Generator 8 (#16) ([660dc86](https://github.com/mister-ben/videojs-mobile-ui/commit/660dc86)), closes [#16](https://github.com/mister-ben/videojs-mobile-ui/issues/16)
-
 <a name="0.7.0"></a>
 # [0.7.0](https://github.com/mister-ben/videojs-mobile-ui/compare/v0.6.1...v0.7.0) (2021-11-09)
 

package/README.md

@@ -1,44 +1,58 @@
 # videojs-mobile-ui
 
-Mobile UI for Video.js.
+> [!WARNING]
+> This branch is a backport for Video.js v7.
+> See the master branch for v8.
 
-Touch controls:
+A more native mobile user experience for Video.js.
 
-- Double-tap the left side of the player to rewind ten seconds
-- Double-tap the right side of the player to fast-forward ten seconds
-- Single-tap the screen to show a play/pause toggle
+**videojs-mobile-ui** augments the standard Video.js experience into a touch-optimized, mobile-first interface. It adds the intuitive gestures and smart behaviors users expect from top-tier video apps to your browser-based player.
 
-Fullscreen control:
+## Key Features
 
-- Rotate to landscape to enter Fullscreen
-- Lock to fullscreen on rotate
-- Always lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
+### 👆 Touch Controls
 
-## Table of Contents
+Double-tap to Seek: Just like popular video apps, users can double-tap the left or right side of the video to rewind or fast-forward.
 
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Installation
+Large play/pause overlay: A large, screen-wide touch zone allows for easy Play/Pause toggling without hunting for tiny buttons.
 
-- [Installation](#installation)
-- [Plugin Options](#plugin-options)
-  - [Default options](#default-options)
-  - [Options](#options)
-- [Usage](#usage)
-  - [`<script>` Tag](#script-tag)
-  - [Browserify/CommonJS](#browserifycommonjs)
-  - [RequireJS/AMD](#requirejsamd)
-- [License](#license)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-## Installation
+### 📱 Fullscreen Orientation:
 
-```sh
-npm install --save videojs-mobile-ui
-```
+Rotate to Watch: Automatically enter fullscreen when the user rotates their phone to landscape.
+
+Orientation Lock: Keeps the video fullscreen and locked to landscape mode even if the user tilts their phone back slightly, preventing accidental exits (works on supported devices).
+
+### 🚀 Swipe Gestures (Optional)
+
+Enable modern swipe gestures to control the viewing mode.
+
+Swipe Up to enter fullscreen with a smooth zoom-in effect.
+
+Swipe Down to exit fullscreen naturally.
+
+### 🎨 Configuration Options
+
+Visual indicators show exactly how many seconds are being skipped during a seek.
+
+Adjust seek times and tap sensitivity to match your specific content needs.
+
+## Compatibility Notes
+
+- iOS Safari does not support orientation lock. The fullscreen video on iOS is native and not influenced by this plugin.
+- Android Firefox has native rotate and lock behaviour when an element containing a video is made fullscreen, which will override this plugin.
 
 ## Plugin Options
 
+Newer functionality is opt-in, to not force new features on existing players. Things you might want to add:
+
+- `fullscreen.swipeToFullscreen`, to enter fullscreen by swiping up on the video.
+- `fullscreen.swipeFromFullscreen`, to exit fullscreen by swiping down on the video (except iPhone).
+- `touchControls.disableOnEnd`, to disable the touch controls at the end of the video. Useful if you have any sort of endcard displayed at the end of the video that might otherwise conflict.
+
+The [demo] page lets you try out the configuration options.
+
+![QR code link to demo page][demo-qr]
+
 ### Default options
 
 ```js
@@ -48,32 +62,70 @@ npm install --save videojs-mobile-ui
     exitOnRotate: true,
     lockOnRotate: true,
     lockToLandscapeOnEnter: false,
-    iOS: false,
+    swipeToFullscreen: false,
+    swipeFromFullscreen: false,
     disabled: false
   },
   touchControls: {
     seekSeconds: 10,
     tapTimeout: 300,
     disableOnEnd: false,
-    disabled: false,
+    disabled: false
   }
 };
 ```
 
 ### Options
 
-- *fullscreen.enterOnRotate* `boolean` Whether to go fullscreen when rotating to landscape
-- *fullscreen.exitOnRotate* `boolean` Whether to leave fullscreen when rotating to portrait (if not locked)
-- *fullscreen.lockOnRotate* `boolean` Whether to lock to fullscreen when rotating to landscape
-- *fullscreen.lockToLandscapeOnEnter* `boolean` Whether to lock to landscape when entering fullscreen (works even when device rotation is disabled/non-functional)
-- *fullscreen.iOS* `boolean` Whether to use fake fullscreen on iOS (needed for controls to work)
-- *fullscreen.disabled* `boolean` If true no fullscreen handling except the *deprecated* iOS fullwindow hack
-- *touchControls.seekSeconds* `int` Seconds to seek when double-tapping
-- *touchControls.tapTimeout* `int` Milliseconds to consider a double-tap
-- *touchControls.disableOnEnd* `boolean` Whether to disable touch controls when the video has ended, e.g. if an endscreen is used. Automatically disables if the endscreen plugin is present when this plugin initialises
-- *touchControls.disableOnEnd* `boolean` If true no touch controls are added.
+- **`fullscreen`** {Object}  
+  Options for fullscreen behaviours.
+- **`fullscreen.enterOnRotate`** {boolean}  
+  If the device is rotated, enter fullscreen.  
+  Default `true`.
+- **`fullscreen.exitOnRotate`** {boolean}  
+  If the device is rotated, exit fullscreen, unless `lockOnRotate` is used.  
+  Default `true`.
+- **`fullscreen.lockOnRotate`** {boolean}  
+  When going fullscreen in response to rotation (`enterOnRotate`), also lock the orientation (not supported by iOS).  
+  Default `true`.
+- **`fullscreen.lockToLandscapeOnEnter`** {boolean}  
+  When fullscreen is entered by any means, lock the orientation (not supported by iOS).  
+  Default `false`.
+- **`fullscreen.swipeToFullscreen`** {boolean}  
+  Swipe up to enter fullscreen.  
+  Default `false`.
+- **`fullscreen.swipeFromFullscreen`** {boolean}  
+  Swipe down to exit fullscreen.  
+  Won't do anything on iOS native fullscreen, which has its own swipe down exit gesture.  
+  Default `false`.
+- **`fullscreen.disabled`** {boolean}  
+  All fullscreen functionality provided by this plugin disabled.  
+  Default `false`.
+- **`touchControls`** {Object}  
+  Options for tap overlay.
+- **`touchControls.seekSeconds`** {number}  
+  Increment to seek in seconds.  
+  Default `10`.
+- **`touchControls.tapTimeout`** {number}  
+  Timeout to consider multiple taps as double rather than two single.  
+  Default `300`.
+- **`touchControls.disableOnEnd`** {boolean}  
+  Disable the touch overlay when the video ends.  
+  Useful if an end screen overlay is used to avoid conflict.  
+  Default `false`.
+- **`touchControls.disabled`** {boolean}  
+  All tap overlay functionality provided by this plugin disabled.  
+  Default `false`.
+
+## Installation
+
+Version 1.x requires video.js 8.x as a peer dependency. Lower video.js versions are not supported.
 
-## Usage
+Version 0.x works with Video.js 7. To install the latest release of 0.x, use the `latest7` tag:
+
+```sh
+npm install videojs-mobile-ui@latest7
+```
 
 To include videojs-mobile-ui on your website or web application, use any of the following methods.
 
@@ -86,16 +138,23 @@ This is the simplest case. Get the script in whatever way you prefer and include
 <script src="//path/to/video.min.js"></script>
 <script src="//path/to/videojs-mobile-ui.min.js"></script>
 <script>
-  var player = videojs('my-video');
-
-  player.mobileUi();
+  const player = videojs('my-video');
+  const pluginOptions = {
+    {
+      fullscreen: {
+        swipeToFullscreen: true
+      } 
+    }
+  };
+
+  player.mobileUi(pluginOptions);
 </script>
 ```
 
 The release versions will be available on jdselivr, unpkg etc.
 
-* https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js
-* https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css
+- https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.min.js
+- https://cdn.jsdelivr.net/npm/videojs-mobile-ui/dist/videojs-mobile-ui.css
 
 ### Browserify/CommonJS
 
@@ -114,7 +173,7 @@ var player = videojs('my-video');
 player.mobileUi();
 ```
 
-Also include the CSS.
+Also include the CSS!
 
 ### RequireJS/AMD
 
@@ -128,7 +187,7 @@ require(['video.js', 'videojs-mobile-ui'], function(videojs) {
 });
 ```
 
-Also include the CSS.
+Also include the CSS!
 
 ### Import
 
@@ -144,5 +203,6 @@ import 'videojs-mobile-ui';
 
 MIT. Copyright (c) mister-ben &lt;git@misterben.me&gt;
 
-
-[videojs]: http://videojs.com/
+[videojs]: http://videojs.org/
+[demo]: https://videojs-mobile-ui.netlify.app
+[demo-qr]: /demo-qr.svg