Enhancement Request: Mobile Camera Integration and UI Bug on Mobile Devices

[Bristopher]

First love the app it's so clean and exactly what I've been looking for!

~~I was wondering if there are any plans to integrate functionality that would allow using the website on an ios phone and being able to use the camera?~~ Also do you plan on adding a mode/button to add straight to a shopping list?

Additionally, I've encountered a minor issue on mobile where clicking the fullscreen or minimize buttons in the bottom right corner results in an "error has occurred" message.

Thank you!


FullScreen trace error in question:

warn: Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100]
      Unhandled exception rendering component: window.document.documentElement.requestFullscreen is not a function. (In 'window.document.documentElement.requestFullscreen()', 'window.document.documentElement.requestFullscreen' is undefined)
      openFullScreen@http://192.168.1.XX:7575/scanner:86:54
      openFullScreen@[native code]
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:3511
      Promise@[native code]
      beginInvokeJSFromDotNet@http://192.168.1.XX:7575/_framework/blazor.server.js:1:3491
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:75071
      asyncFunctionResume@[native code]
      _processIncomingData@http://192.168.1.XX:7575/_framework/blazor.server.js:1:72709
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:51325
      Microsoft.JSInterop.JSException: window.document.documentElement.requestFullscreen is not a function. (In 'window.document.documentElement.requestFullscreen()', 'window.document.documentElement.requestFullscreen' is undefined)
      openFullScreen@http://192.168.1.XX:7575/scanner:86:54
      openFullScreen@[native code]
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:3511
      Promise@[native code]
      beginInvokeJSFromDotNet@http://192.168.1.XX:7575/_framework/blazor.server.js:1:3491
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:75071
      asyncFunctionResume@[native code]
      _processIncomingData@http://192.168.1.XX:7575/_framework/blazor.server.js:1:72709
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:51325
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at GrocyScanner.Service.Shared.Components.FullScreenToggle.OnClickFullScreen() in /src/GrocyScanner.Service/Shared/Components/FullScreenToggle.razor:line 13
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at MudBlazor.MudBaseButton.OnClickHandler(MouseEventArgs ev)
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
fail: Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost[111]
      Unhandled exception in circuit '1fJiEYrVwZOnz9CXHczx-5vOjc1E8TRXi4xPv4j18ps'.
      Microsoft.JSInterop.JSException: window.document.documentElement.requestFullscreen is not a function. (In 'window.document.documentElement.requestFullscreen()', 'window.document.documentElement.requestFullscreen' is undefined)
      openFullScreen@http://192.168.1.XX:7575/scanner:86:54
      openFullScreen@[native code]
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:3511
      Promise@[native code]
      beginInvokeJSFromDotNet@http://192.168.1.XX:7575/_framework/blazor.server.js:1:3491
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:75071
      asyncFunctionResume@[native code]
      _processIncomingData@http://192.168.1.XX:7575/_framework/blazor.server.js:1:72709
      @http://192.168.1.XX:7575/_framework/blazor.server.js:1:51325
         at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
         at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
         at GrocyScanner.Service.Shared.Components.FullScreenToggle.OnClickFullScreen() in /src/GrocyScanner.Service/Shared/Components/FullScreenToggle.razor:line 13
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at MudBlazor.MudBaseButton.OnClickHandler(MouseEventArgs ev)
         at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
         at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

[GoodOldJack12]

Most browsers block camera support if the site is not https, you might be running into that.

[Bristopher]

Most browsers block camera support if the site is not https, you might be running into that.

That was it! It can see my iPhone's camera now, Thank you!

[manuel-rw]

Also do you plan on adding a mode/button to add straight to a shopping list?

No, I do not have any plans for that since I don't use the shopping list feature. But I'm happy to review and accept any PRs.

Glad that you were able to solve the camera issue. Personally the camera is not stable enough for me and I purchased a barcode scanner which works great so far (instant read).

I'll leave this issue open so whoever has time can investigate the error (quite busy so let's see if I actually will have some capacity).

[GoodOldJack12]

Looks like its a compatibility issue with Safari: https://github.com/mdn/browser-compat-data/issues/18807 Simple css fix: https://stackoverflow.com/questions/71691474/css-media-query-display-mode-fullscreen-does-not-work-on-safari

As for shopping list feature, I was thinking of making a PR for that in the future.