overlays: remove video and positionned overlays

Author: mistic100

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
         '@typescript-eslint/array-type': ['error', { default: 'array-simple' }],
         '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
         '@typescript-eslint/class-literal-property-style': 'off',
+        '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }]
     },
     ignorePatterns: ['**/dist/**/*', '*.js'],
 };

docs/plugins/demos-src/overlays.js

@@ -15,16 +15,6 @@ const viewer = new Viewer({
                     id: 'xray',
                     path: baseUrl + 'sphere-overlay.png',
                     opacity: .8,
-                    zIndex: 1,
-                },
-                {
-                    path: baseUrl + 'pictos/tent.png',
-                    opacity: 1,
-                    yaw: -0.5,
-                    pitch: 0.1,
-                    width: 0.4,
-                    height: 0.3,
-                    zIndex: 2,
                 },
             ],
         }],

docs/plugins/overlays.md

@@ -4,19 +4,15 @@
 
 ::: module
 <ApiButton page="modules/OverlaysPlugin.html"/>
-Display additional images and videos on top of the panorama.
+Display additional images on top of the panorama.
 
 This plugin is available in the [@photo-sphere-viewer/overlays-plugin](https://www.npmjs.com/package/@photo-sphere-viewer/overlays-plugin) package.
 :::
 
 ## Usage
 
-Overlays are images and videos "glued" to the panorama. Contrary to [markers](./markers.md) they are part of the 3D scene and not drawn on top of the viewer.
-
-Two kinds of overlays are supported :
-
--   full size equirectangular/cubemap : will cover the entire panorama
--   positionned rectangle : the image/video has a defined position and size (always in radians/degrees)
+Overlays are images "glued" to the panorama. Contrary to [markers](./markers.md) they are part of the 3D scene and not drawn on top of the viewer.
+The images must have the same proportions of the base panorama and must be transparent. Both equirectangular (full or cropped) and cubemaps are supported.
 
 ```js
 import { OverlaysPlugin } from '@photo-sphere-viewer/overlays-plugin';
@@ -26,27 +22,9 @@ const viewer = new Viewer({
         [OverlaysPlugin, {
             overlays: [
                 {
-                    id: 'fullsize',
+                    id: 'overlay',
                     path: 'path/to/overlay.png',
                 },
-                {
-                    id: 'positionned',
-                    path: 'path/to/image.jpg',
-                    yaw: '-20deg',
-                    pitch: '10deg',
-                    width: '40deg',
-                    height: '20deg',
-                    opacity: 0.5,
-                },
-                {
-                    id: 'video',
-                    type: 'video',
-                    path: 'path/to/video.mp4',
-                    yaw: '20deg',
-                    pitch: '10deg',
-                    width: '40deg',
-                    height: '20deg',
-                },
             ],
         }],
     ],
@@ -68,17 +46,6 @@ packages:
 
 :::
 
-::: tip Overlays vs. Markers
-Overlays seem very similar to image/video markers but serve different purposes:
-
--   Markers are for "small" elements, generally interactive
--   Markers are highly configurable (style, tooltip, user events, etc.)
--   Overlays can cover the whole panorama
--   Overlays cannot have a tooltip, change size, etc. You can however listen to click events
--   Overlays are rendered over the panorama itself where markers are rendered flat over the viewer HTML element
-
-:::
-
 ## Configuration
 
 #### `overlays`
@@ -107,11 +74,6 @@ Overlays can be a single image/video for a spherical gerometry or six images for
 
 Used to remove the overlay with `removeOverlay()` method.
 
-#### `type`
-
--   type: `image | video`
--   default: `image`
-
 #### `opacity`
 
 -   type: `number`
@@ -128,55 +90,15 @@ Used to remove the overlay with `removeOverlay()` method.
 
 -   type: `string`
 
-Path to the image or video.
-
-#### `yaw`, `pitch`, `width`, `height`
-
--   type: `number | string`
-
-Definition of the position and size of the overlay, if none of the four properties are configured, the overlay will cover the full sphere, respecting the [panorama data](../guide/adapters/equirectangular.md#cropped-panorama) if applicable.
-
-#### `chromaKey`
-
--   type: `object`
--   default: `{ enabled: false }`
-
-Will make a color of the image/video transparent.
-
-::: dialog "See details" "Marker chroma key"
-
-The `chromaKey` marker option allows to define a color which will be transparent (green screen/blue screen).
-
-```ts
-chromaKey: {
-    /**
-     * Enable the option
-     */
-    enabled: true,
-    /**
-     * Select which color to make transparent (default is green)
-     */
-    color: 0x00ff00,
-    color: { r: 0, g: 255, 0 },
-    /**
-     * Customize the color detection (default is 0.2 / 0.2)
-     */
-    similarity: 0.2,
-    smoothness: 0.2,
-}
-```
-
-:::
-
-_(This option is only applicable to spherical overlays)._
+Path to the image.
 
 #### Cube overlays
 
 #### `path` (required)
 
 -   type: `CubemapPanorama`
 
-Check the [cubemap adapter page](../guide/adapters/cubemap.md#panorama-options) for the possible syntaxes. All six faces are required.
+Check the [cubemap adapter page](../guide/adapters/cubemap.md#panorama-options) for the possible syntaxes. All six faces are required but some can be `null`.
 
 ## Methods
 
@@ -192,14 +114,6 @@ Removes an overlay.
 
 Removes all overlays.
 
-#### `getVideo(id)`
-
-Returns the controller of a video overlay (native HTMLVideoElement) in order to change its state, volume, etc.
-
-```js
-overlaysPlugin.getVideo('my-video').muted = false;
-```
-
 ## Events
 
 #### `overlay-click(overlayId)`

examples/plugin-overlays-cubemap.html

@@ -58,22 +58,6 @@
                                 opacity: .8,
                                 zIndex: 1,
                             },
-                            // {
-                            //     id: 'xray',
-                            //     path: baseUrl + 'sphere-overlay.png',
-                            //     opacity: .8,
-                            //     zIndex: 1,
-                            // },
-                            {
-                                id: 'rick',
-                                path: baseUrl + 'pictos/rick.webm',
-                                type: 'video',
-                                yaw: 0,
-                                pitch: 0.21,
-                                width: 0.21,
-                                height: 0.42,
-                                zIndex: 3,
-                            },
                         ],
                     }],
                 ],

examples/plugin-overlays.html

@@ -46,39 +46,6 @@
                                 opacity: .8,
                                 zIndex: 1,
                             },
-                            {
-                                path: baseUrl + 'pictos/tent.png',
-                                opacity: 0.7,
-                                yaw: -0.5,
-                                pitch: 0.19,
-                                width: 0.4,
-                                height: 0.3,
-                                zIndex: 2,
-                            },
-                            {
-                                id: 'rick',
-                                path: baseUrl + 'pictos/rick.webm',
-                                type: 'video',
-                                yaw: 0,
-                                pitch: 0.21,
-                                width: 0.21,
-                                height: 0.42,
-                                zIndex: 3,
-                            },
-                            {
-                                id: 't-rex',
-                                path: baseUrl + 'pictos/t-rex.mp4',
-                                type: 'video',
-                                yaw: 0.25,
-                                pitch: 0.15,
-                                width: 0.3,
-                                height: 0.3,
-                                zIndex: 3,
-                                chromaKey: {
-                                    enabled: true,
-                                    similarity: 0.3,
-                                },
-                            },
                         ],
                     }],
                 ],
@@ -112,15 +79,7 @@
             const overlays = viewer.getPlugin('overlays');
 
             overlays.addEventListener('overlay-click', ({ overlayId }) => {
-                console.log(`click ${overlayId}`);
-                if (overlayId === 'rick') {
-                    const video = overlays.getVideo(overlayId);
-                    if (video.paused) {
-                        video.play();
-                    } else {
-                        video.pause();
-                    }
-                }
+                console.log(`click overlay ${overlayId}`);
             });
 
             function setSphereOverlay(path) {

packages/core/src/adapters/EquirectangularAdapter.ts

@@ -79,8 +79,10 @@ export class EquirectangularAdapter extends AbstractAdapter<string | Equirectang
 
     private readonly config: EquirectangularAdapterConfig;
 
-    readonly SPHERE_SEGMENTS: number;
-    readonly SPHERE_HORIZONTAL_SEGMENTS: number;
+    // @internal
+    public readonly SPHERE_SEGMENTS: number;
+    // @internal
+    public readonly SPHERE_HORIZONTAL_SEGMENTS: number;
 
     constructor(viewer: Viewer, config?: EquirectangularAdapterConfig) {
         super(viewer);

packages/cubemap-adapter/src/CubemapAdapter.ts

@@ -369,26 +369,28 @@ export class CubemapAdapter extends AbstractAdapter<CubemapPanorama, CubemapData
     }
 
     setTexture(mesh: CubemapMesh, { texture, panoData }: CubemapTextureData) {
-        for (let i = 0; i < 6; i++) {
+        mesh.material.forEach((material, i) => {
             if (texture[i]) {
                 if (panoData.flipTopBottom && (i === 2 || i === 3)) {
                     texture[i].center = new Vector2(0.5, 0.5);
                     texture[i].rotation = Math.PI;
                 }
 
-                mesh.material[i].map = texture[i];
+                material.map = texture[i];
             } else {
-                mesh.material[i].opacity = 0;
-                mesh.material[i].transparent = true;
+                material.opacity = 0;
+                material.transparent = true;
             }
-        }
+        });
     }
 
     setTextureOpacity(mesh: CubemapMesh, opacity: number) {
-        for (let i = 0; i < 6; i++) {
-            mesh.material[i].opacity = opacity;
-            mesh.material[i].transparent = opacity < 1;
-        }
+        mesh.material.forEach((material) => {
+            if (material.map) {
+                material.opacity = opacity;
+                material.transparent = opacity < 1;
+            }
+        });
     }
 
     disposeTexture({ texture }: CubemapTextureData): void {