naver/egjs-view360

360 integrated viewing solution

View360

360° panorama image / video viewer built with Typescript

npm install @egjs/view360@next

Demo / API / Other components

Supported Browsers

With Promise polyfill

11+	latest	latest	latest	9+	5.0+

📦 Packages

Package	Version	Description
@egjs/ngx-view360		Angular port of @egjs/view360
@egjs/react-view360		React port of @egjs/view360
@egjs/vue-view360		Vue.js@2 port of @egjs/view360
@egjs/vue3-view360		Vue.js@3 port of @egjs/view360
@egjs/svelte-view360		Svelte port of @egjs/view360

License

egjs-view360 is released under the MIT license.

Copyright (c) 2023-present NAVER Corp.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

egjs-view360's Issues

Make getImage, getVideo method to return element before loaded.

If you use an element as an argument in a setImage or setVideo method call, you can control the playback of the media source by accessing the element, but if you use the resource url as an argument, access to the element is blocked until the load is complete. And playback control on the media source would not possible.

So if you want to use a string as an argument, and you want to provide the same functionality as using an element as an argument, you should be able to get the image/video element through getContent before the resource loading is complete.

make gh-page template

Should make gh-page template with jekyll.

Support 1536 cube image for some mobile browser.

Description

No Work or Crash were reported on iOS9, Android 6.x (GalaxyS5, LG G5) when loading 1536px(=width) cube image.

Steps to check or reproduce

• Load cube projection type image with width (=1536px)
• Run on browser iOS9, Android 6.0 (Galaxy S5, LG G5)

add unit test for YawPitchControl

Because of toooo low test coverage

option name showPolePoint is not same with YawPitchControl's

Description

YawPitchControl still have showPolePoint option name as old name showPole.
So, it makes weird behavior.

Steps to check or reproduce

var panoViewer = new PanoViewer(el, {
  fovRange: [30, 65],
  fov: 65
});

// then
panoViewer.getFov() === 65; // false. but it should me true.   

distribute npm package

Description

1. all

• @egjs\view360

2. panoviewer

• @egjs/view360-panoviewer

2. spinviewer

• @egjs/view360-spinviewer

Fix PanoViewer after chage of egjs-component

egjs-component's API changed, ref
and it broke PanoViewer module.

Script error on PanoViewer's Visible test

Description

Test page cannot import visible component. because egjs-visible is not included in dev environment.

Steps to check or reproduce

• test page
  • /test/manual/PanoViewer/Visible.html

SpinViewer - Support separated image for spinning

Description

SpinViewer uses sprite image for spinning. But some browser makes bug when changing backgroundPosition. By support separated image, we can download resource progressively.

Write content of gp-pages for SpinViewer

fix jsdoc class name of PanoViewer

Description

AS IS

PanoViewer

TO BE

eg.view360.PanoViewer

Release 2.0.0

Description

All job for release 2.0.0

Representative job

• #3
• #4
• #21
• #22
• #20
• #27

Apply axes 2.3.0

Description

Axes 2.3.0 has some fixed circular bug which is directly related with view360.

https://github.com/naver/egjs-axes/releases/tag/2.3.0

• MovableCoord always stops at the edge that circular value is true (naver/egjs-axes#3)
• Need support circular on setBy method (naver/egjs-axes#71)
• When target is animating grab is not working (naver/egjs-axes#74)

jsdoc of PanoViewer for Event

Description

Events are not documented in jsdoc style.

For example

//resume, suspend, animationEnd, error, init

Support adaptive test image for rendering test

Description

The rendering test is failing when it has non HiDPI display.
Because the test image is from HiDPI display.

Support 360 Video Source

Description

Support not only image but also VIDEO!

Todo

• video tag support (equirectangular type)
• resource basic exception handling
• Interface for access video/image element.

Support video source on SpinViewer

Description

Currently Sprite image is only supported. It's better to support spinning video.

Add promotion page for PanoViewer

Pages used by soscon for booth events

Make SpinViewer test working on some browser.

Description

SpinViewer.html does not work on following browser.

• No Action on Android 2.3
• console error on IE9

Script Errors on Manual test with IE11

On the test script. there is es6 syntax that IE11 don't support

like
https://github.com/naver/egjs-view360/blob/master/test/manual/js/GridView.js#L28
https://github.com/naver/egjs-view360/blob/master/test/manual/PanoViewer/PanoViewer.html#L352

should remove es6 syntax.

Deploy gh-pages

FireFox Script error

Description

Firefox fires script error.

It is related with naver/egjs-axes#76

run webgl test on travis-ci

headless chrome is crashing when render webgl context on travis-ci.

Too highly sensitivity after axes 2.3.0 (Need Tune)

Description

SpinViewer rotates items very strongly in spite of weak touch after applying axes 2.3.0

Scale value needs to be tuned.

Steps to check or reproduce

• test file: /test/manual/SpinViewer/SpinViewer.html
• scale : 1

• it rotates for 12 seconds.

Visible.html Manual test's projection type is wrong

Description

Visible.html Manual test's projection type is wrong.
should change imageType option value from "equirectangular" to "vertial_cubestrip".

Support video tag for playing video

Description

By specifying video-tag in video property, makes PanoViewer play video. and support equirectangular first.

Steps to check or reproduce

var photo360Viewer = new eg.view360.PanoViewer(rootNode, {
      video: document.getElementById("videoSrc"),
   });

Write content of gp-pages for PanoViewer

Thumnail at panoviewer page is broken

Description

Thumnail at panoviewer page is broken.

https://naver.github.io/egjs-view360/panoviewer.html

add SphereRenderer unit test use

Description

use Resemble + Canvas2Blob

Check browser support on SpinViewer

Description

It's difficult to check if spinviewer is available. It's better to give a chance to check available. for example firing exception.

view360 main gh-pages has wrong Github link

Description

view360 main gh-pages has wrong Github link

Steps to check or reproduce

Github link on Upper-Right side is linked to https://naver.github.io/egjs-view360/naver/egjs-view360

Manual Test (ContextLost, Events, Visible) Migration

Description

This jobs are followed by #44 (supporting video source).

Interface is changed, so need to apply it.

Support multiple images on SpinViewer

Description

Currently Sprite image is only supported. It's better to support multiple images as a source for convinence.

How about _triggerEvent asynchronously when firing error.

Description

Currently PanoViewer fires error asynchronously.

For example,

if (options.checkSupport && !options.checkSupport()) {
	setTimeout(() => {
		this.trigger(EVENTS.ERROR, {
			type: ERROR_TYPE.INVALID_DEVICE,
			message: "invalid device"
		});
	}, 0);

	return this;
}

How about this async logic into _triggerEvent function?

If event name is "error" then, fire event asynchronously.

Support Safari browser

Description

In spite that video is available on Safari, PanoViewer is not working on safari browser.

Add projects built with PanoViewer to PanoViewer page

• Naver Real Estate
• Naver Blog
• Naver Post
• Naver Partner Square

README Components Table Layout is ugly on jsdoc document.

Description

Table width elapse the width of contents like follow.

AS IS

TO BE

Steps to check or reproduce

Script Errors on IE11 (PanoViewer)

Description

Fails on IE11

because use of Object.assign

Let's deal this with babel polyfill.

PanoViewer - Changing image is not working.

Description

setImage cannot change image if imageType is changed.

Steps to check or reproduce

panoViewer.setImage("image", "othertypeFromBefore"); //It cannot change image.

Memory usage error on Safari while running video.

Description

It fires memory use exceeds warning and null exception error like below.

There may be memory leaks.

Steps to check or reproduce

1. /test/manual/PanoViewer/PanoVideo.html
2. click play
3. wait until it is paused.
4. go 2 step.(util error is occurs)

Rotating device when initiating instance makes camera direction not facing front.

Description

Rotating device when initiating instance makes camera direction not facing front.

As is

To be

Providing 'release' event

Description

From the discussion below,
#42 (comment)
@jongmoon thinks providing 'release' event will help developing with PanoViewer.
But I do not know what kind of situation is like the 'release' event becoming useful.

Isn't it enough to use debounce method to 'change' event?

Regarding Various input devices (Keyboard, Mouse, Touch, Motion(Comming Soon)…)

Hi there

Looking fwd to the support for input devices, great to see they're on the roadmap.
Have done some research to find a performant solution and this is very well done indeed!

As an accessibility feature for users who don't immediately grasp the ability to manipulate the image sequence, would be nice to have an HTML range slider that can then be dragged to have the 360 move in sync.

Thanks

bind travis & coveralls

Description

Badge for Travis & coveralls

Reactivity(Scale) should be changed by image width automatically.

Description

If image's width is narrow, angle of rotation is small, if image's width is wide, angle of rotation is big.

It makes user experience be different on mobile and desktop environment.

Ignore distribution files on demo

Description

Following files should not be pushed on master branch

• demo/_data/version.yml
• demo/release/

There's browser blinking & making lines on playing sprite images

Description

There's browser blinking & making lines on playing sprite images

Steps to check or reproduce

Reported Browser

• NAVER App (Engine Version 2 Beta)

Support Multi video input

Description

In video tag, you can specify multi resources for applying available video on that browser.

But Current setVideo Interface can accept only one video param. So you cannot specify multi resources if you pass it as a URL.

In this job,
If video source is URL(string), then it should accept url as Array like following.

setVideo(["url for iphone", "url for android", "and others"]);

Update description and version for release.

Description

Update description and version for release.

When zooming out over the limit angle, camera direction jumps in unexpected direction

Description

When zooming out over the limit angle, camera direction jumps in unexpected direction

Steps to check or reproduce

1. set showPolePoint option false
2. Lower the camera so that the middle of the bottom plate snaps to the bottom of the viewer.
3. Try to zoom out with the mouse wheel.
4. At some point the pitch angle springs.