black screen using firefox?

[kadrim]

Hi there!

i really love to use photospheres but for me it seems not to work correctly.

I am using NC 18 and Photo Sphere Viewer 1.0.7

On all Windows (10) devices with Firefox (currently v 75) the Panoramas won't display. On Chrome and Edge (also Chrome) everything is fine. Even on mobile phones (Android 10) with firefox the Panorama is displayed.

But on the Desktop Firefox everything is Black.

Any ideas? I can provide console-logs or give you a public link to one of my panos.

Thanks in advance!

[R0Wi]

Hi @kadrim,

thanks for your feedback. I did a quick test on Firefox 75.0 64bit (Ubuntu 18.04) and i didn't encounter any issues. Would be nice to see your console log and maybe also have your mentioned public link.

I have to say that the app is just integrating the "photosphere viewer js" library from https://photo-sphere-viewer.js.org/ so any problems regarding this component can't be directly fixed by me. But let me have a look i will give you feedback then :-)

[kadrim]

Thanks for the quick reply!

Here is the public link:

https://nextcloud.tyrael.metaname.de/s/zNk8o9wyNtoYGJe

The curious thing is, that using FF on https://photo-sphere-viewer.js.org/ does work. So maybe it's the integration within NC or (more likely) my NC / nginx setup... any hints are very appreciated :-)

Here is the console log of Firefox using that link:

Handlebars is deprecated: please ship your own, this will be removed in Nextcloud 20 main.js:1082:57
oc_requesttoken is deprecated: use OC.requestToken instead main.js:1082:57
Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. main.js:230:11228
Source-Map-Fehler: Error: NetworkError when attempting to fetch resource.
Ressourcen-Adresse: https://nextcloud.tyrael.metaname.de/core/js/dist/main.js?v=db4740de-0
Source-Map-Adresse: main.js.map
3
Content Security Policy: 'x-frame-options' wird wegen 'frame-ancestors'-Direktive ignoriert.
Der Orientierungssensor sollte nicht mehr verwendet werden. photo-sphere-viewer.min.js:7:86290
THREE.WebGLRenderer 9
Source-Map-Fehler: Error: NetworkError when attempting to fetch resource.
Ressourcen-Adresse: https://nextcloud.tyrael.metaname.de/core/js/dist/main.js?v=db4740de-0
Source-Map-Adresse: main.js.map

[kadrim]

just booted my linux with FF 74 and i get that via console log:

JQMIGRATE: Migrate is installed, version 1.4.1 main.js:566:531
Diese Seite verwendet die nicht standardisierte Eigenschaft "zoom". Stattdessen sollte calc() in den entsprechenden Eigenschaftswerten oder "transform" zusammen mit "transform-origin: 0 0" verwendet werden. main.js:230:11228
Handlebars is deprecated: please ship your own, this will be removed in Nextcloud 20 main.js:1082:57
oc_requesttoken is deprecated: use OC.requestToken instead main.js:1082:57
Content Security Policy: 'x-frame-options' wird wegen 'frame-ancestors'-Direktive ignoriert.
Der Orientierungssensor sollte nicht mehr verwendet werden. photo-sphere-viewer.min.js:7:86290
THREE.WebGLRenderer 93 three.min.js:174:393
Source-Map-Fehler: Error: NetworkError when attempting to fetch resource.
Ressourcen-Adresse: https://nextcloud.tyrael.metaname.de/core/js/dist/main.js?v=db4740de-0
Source-Map-Adresse: main.js.map

[kadrim]

for comparision, this is what i get via chrome on win10 (here it works):

JQMIGRATE: Migrate is installed, version 1.4.1
main.js?v=db4740de-0:1082 Handlebars is deprecated: please ship your own, this will be removed in Nextcloud 20
ne @ main.js?v=db4740de-0:1082
get @ main.js?v=db4740de-0:1082
(anonymous) @ templates.js?v=db4740de-0:2
(anonymous) @ templates.js?v=db4740de-0:43
main.js?v=db4740de-0:1082 oc_requesttoken is deprecated: use OC.requestToken instead
ne @ main.js?v=db4740de-0:1082
get @ main.js?v=db4740de-0:1082
(anonymous) @ fileAction.js?v=db4740de-0:347
DevTools failed to parse SourceMap: https://nextcloud.tyrael.metaname.de/core/js/dist/main.js.map
DevTools failed to parse SourceMap: https://nextcloud.tyrael.metaname.de/apps/files_sharing/js/dist/main.js.map
DevTools failed to parse SourceMap: https://nextcloud.tyrael.metaname.de/apps/files_videoplayer/js/main.js.map
DevTools failed to parse SourceMap: https://nextcloud.tyrael.metaname.de/apps/text/js/public.js.map
DevTools failed to parse SourceMap: https://nextcloud.tyrael.metaname.de/apps/spreed/js/talk-public-share-sidebar.js.map
zNk8o9wyNtoYGJe:1 GET https://nextcloud.tyrael.metaname.de/apps/files_sharing/publicpreview/zNk8o9wyNtoYGJe?x=1365&y=587&a=true&file=2020-04-16_Panorama-Pappelsee-Balingen.jpg&scalingup=0 404
Image (async)
attr @ main.js?v=db4740de-0:25
e.attr @ main.js?v=db4740de-0:566
m.access @ main.js?v=db4740de-0:25
attr @ main.js?v=db4740de-0:25
initialize @ public.js?v=db4740de-0:173
(anonymous) @ public.js?v=db4740de-0:483
(anonymous) @ main.js?v=db4740de-0:25
setTimeout (async)
(anonymous) @ main.js?v=db4740de-0:25
(anonymous) @ main.js?v=db4740de-0:25
I @ main.js?v=db4740de-0:25
i @ main.js?v=db4740de-0:25
(anonymous) @ public.js?v=db4740de-0:482
c @ main.js?v=db4740de-0:25
fireWith @ main.js?v=db4740de-0:25
ready @ main.js?v=db4740de-0:25
P @ main.js?v=db4740de-0:25
three.min.js?v=1.0.7:174 THREE.WebGLRenderer 93

[R0Wi]

Thanks for the provided image (it's impressing by the way ;-) ). I did a quick minimal setup with the library and without any NC infrastructure:

• http://example.labella-band.de/panorama1.html (same library version as used in the app)
• http://example.labella-band.de/panorama2.html (newest stable release 3.6.0)

Unfortunately i wasn't able to get things working with Firefox so the problem seems to be indeed inside the library itself. I also tested your sample image with the newer 4.0.0 alpha here but without success, so it seems that the problem still exists in future versions.

I did a quick analysis of the xmp-data of your image and i noticed that it's completely missing any cropping information. Regarding GPano info there is only one tag:

<rdf:Description rdf:about=""
            xmlns:GPano="http://ns.google.com/photos/1.0/panorama/">
         <GPano:ProjectionType>equirectangular</GPano:ProjectionType>

But that doesn't explain why the same image is working in other browsers.

Maybe you would like to open an issue here, sorry that i can't help you here :-(

[kadrim]

Thanks alot for your insights!

i will open an issue upstream and link it here - can i just copy over the examples you provided on your (Band :-) )-Site onto my servers?

The image was made by using a DJI Mavic Pro, stitched the images via ICE, then fixups via Photoshop and lastly i added the needed EXIF data by hand. So the problem might be there, but as you said, it doesn't explain why it is working within other browsers.

I hope an upstream-dev can have a look into it.

Many thanks again for your time!

Shall i keep this issue open for the time being?

[R0Wi]

You're welcome :-)

I provided the whole sample as archive here, please let me know if you downloaded the file. If you're okay with that i would close the issue here because this is not an issue with the app but rather with the component it's integrating. But please feel free to make a reference to this issue, it will help the photosphere viewer js devs ;-)

[kadrim]

I just downloaded the archive - thanks alot for your astonishing support!

and, just for the sake of completeness (since we live in the same federal state): "bleib g'sond und dangschee, adé" :-)