[5.0.3-5.1.0] Cannot go to next or previous photo

[lilian-pouliquen]

Detailed description of the problem [REQUIRED]

Hello, when I am browsing my photos, clicking on the left and right arrows does not work. So does using left and right keys on the keyboard

Steps to reproduce the issue

Steps to reproduce the behavior:

1. Go to a photo in any album
2. Click on the left or right arrow on the left or right of the screen, it does change the photo
3. Try with left or right keys, it doesn't work either

Output of the diagnostics [REQUIRED]

    Diagnostics
    -----------
        Warning: Dropbox import not working. dropbox_key is empty.
        Warning: zend.assertions is disabled although Lychee is in debug mode. For easier debugging code generation for assertions should be enabled.
        Error: APP_URL (https://***) does not match the current url (http://***).
               This will break WebAuthn authentication.
        Error: APP_URL (https://***) does not match the current url (http://***).
               This will prevent images from being properly displayed.
        Info: Latest version of PHP is 8.3
        Warning: git (software) is not available.
        Info: Found 15 medium that could be generated.
              You can use `php artisan lychee:generate_thumbs medium 15` to generate them.
     

    System Information
    ------------------
        Lychee Version (git):                    ?? (28dec12) -- Could not compare.
        DB Version:                              5.1.0
        
        composer install:                        --no-dev
        APP_ENV:                                 production
        APP_DEBUG:                               true
        APP_URL:                                 set
        APP_DIR:                                 default
        LOG_VIEWER_ENABLED:                      true
        LIVEWIRE_ENABLED:                        true
        
        System:                                  Linux
        PHP Version:                             8.2.7
        PHP User agent:                          Lychee/4 (https://lycheeorg.github.io/)
        Timezone:                                Europe/Paris
        Max uploaded file size:                  100M
        Max post size:                           100M
        Livewire chunk size:                     12.00 MB
        Max execution time:                      3600
        PostgreSQL Version:                      PostgreSQL 16.1 on x86_64-pc-linux-musl, compiled by gcc (Alpine 12.2.1_git20220924-r10) 12.2.1 20220924, 64-bit
        
        exec() Available:                        yes
        Imagick Available:                       1
        Imagick Enabled:                         1
        Imagick Version:                         1691
        GD Version:                              2.3.3
        Number of foreign key:                   12 found.
     

    Config Information
    ------------------
        version:                                 050100
        check_for_updates:                       0
        sorting_photos_col:                      taken_at
        sorting_photos_order:                    ASC
        sorting_albums_col:                      title
        sorting_albums_order:                    ASC
        imagick:                                 1
        skip_duplicates:                         0
        small_max_width:                         0
        small_max_height:                        360
        medium_max_width:                        1920
        medium_max_height:                       1080
        lang:                                    fr
        image_overlay_type:                      desc
        default_license:                         reserved
        compression_quality:                     90
        grants_full_photo_access:                1
        delete_imported:                         0
        mod_frame_enabled:                       1
        mod_frame_refresh:                       30
        thumb_2x:                                1
        small_2x:                                1
        medium_2x:                               1
        landing_page_enable:                     1
        site_owner:                              Lilian POULIQUEN
        landing_title:                           Home-Pouliquen Photos
        landing_subtitle:                        Un cloud c'est bien, chez soi c'est mieux !
        sm_facebook_url:                         
        sm_flickr_url:                           
        sm_twitter_url:                          
        sm_instagram_url:                        
        sm_youtube_url:                          
        landing_background:                      dist/cat.webp
        site_title:                              Home-Pouliquen Photos
        footer_show_copyright:                   1
        site_copyright_begin:                    2021
        site_copyright_end:                      2023
        footer_additional_text:                  
        footer_show_social_media:                0
        search_public:                           0
        SL_enable:                               0
        SL_for_admin:                            0
        recent_age:                              1
        grants_download:                         1
        photos_wraparound:                       1
        map_display:                             0
        zip64:                                   1
        map_display_public:                      0
        map_provider:                            Wikimedia
        force_32bit_ids:                         0
        map_include_subalbums:                   0
        update_check_every_days:                 3
        has_exiftool:                            1
        share_button_visible:                    0
        import_via_symlink:                      0
        has_ffmpeg:                              1
        location_decoding:                       0
        location_decoding_timeout:               30
        location_show:                           1
        location_show_public:                    0
        rss_enable:                              0
        rss_recent_days:                         7
        rss_max_items:                           100
        prefer_available_xmp_metadata:           0
        editor_enabled:                          1
        lossless_optimization:                   0
        swipe_tolerance_x:                       150
        swipe_tolerance_y:                       250
        local_takestamp_video_formats:           .avi|.mov
        log_max_num_line:                        1000
        unlock_password_photos_with_url_param:   0
        nsfw_visible:                            1
        nsfw_blur:                               0
        nsfw_warning:                            0
        nsfw_warning_admin:                      0
        nsfw_banner_override:                    
        map_display_direction:                   1
        album_subtitle_type:                     oldstyle
        upload_processing_limit:                 4
        new_photos_notification:                 0
        legacy_id_redirection:                   1
        zip_deflate_level:                       6
        SA_enabled:                              1
        default_album_protection:                1
        album_decoration:                        layers
        album_decoration_orientation:            row
        allow_username_change:                   1
        auto_fix_orientation:                    1
        use_job_queues:                          0
        random_album_id:                         starred
        use_last_modified_date_when_no_exif_date: 0
        ffmpeg_path:                             /usr/bin/ffmpeg
        ffprobe_path:                            /usr/bin/ffprobe
        layout:                                  justified
        date_format_photo_thumb:                 M j, Y, g:i:s A e
        date_format_photo_overlay:               M j, Y, g:i:s A e
        date_format_sidebar_uploaded:            M j, Y, g:i:s A e
        date_format_sidebar_taken_at:            M j, Y, g:i:s A e
        date_format_hero_min_max:                F Y
        date_format_hero_created_at:             M j, Y, g:i:s A T
        date_format_album_thumb:                 M Y
        upload_chunk_size:                       0
        nsfw_banner_blur_backdrop:               0
        search_pagination_limit:                 1000
        search_minimum_length_required:          4
        photo_layout_justified_row_height:       320
        photo_layout_masonry_column_width:       300
        photo_layout_grid_column_width:          250
        photo_layout_square_column_width:        200
        photo_layout_gap:                        12
        display_thumb_album_overlay:             always
        display_thumb_photo_overlay:             hover
        default_album_thumb_aspect_ratio:        1/1
        use_album_compact_header:                0
        login_button_position:                   left
        back_button_enabled:                     0
        back_button_text:                        Return to Home
        back_button_url:                         /

JS console Warning when clicking on arrows
-----------

Alpine Expression Error: The operation is insecure. => [livewire.js:1198:13](https://***/livewire/livewire.js?id=e2b302e9)
Expression: "next()"

<a id="nextButton" class="absolute top-1/2 border …te-x-0 translate-x-full" x-bind:style="nextStyle()" x-on:click="next()" style="background-image: linear…7cdfe137f4967d56f.jpeg')">

JS console Error when clicking on arrows

Uncaught DOMException: The operation is insecure. => [app-a0cc4354.js:9](https://***/build/assets/app-a0cc4354.js)
    history https://***/build/assets/app-a0cc4354.js:9
    goTo https://***/build/assets/app-a0cc4354.js:9
    next https://***/build/assets/app-a0cc4354.js:9
    anonymous https://***/livewire/livewire.js?id=e2b302e9 line 1249 > AsyncFunction:3
    generateEvaluatorFromString https://***/livewire/livewire.js?id=e2b302e9:1271
    tryCatch https://***/livewire/livewire.js?id=e2b302e9:1191
    removeListener https://***/livewire/livewire.js?id=e2b302e9:3779
    handler4 https://***/livewire/livewire.js?id=e2b302e9:3114
    handler4 https://***/livewire/livewire.js?id=e2b302e9:3179
    wrapHandler ***/livewire/livewire.js?id=e2b302e9:3116
    history https://***/build/assets/app-a0cc4354.js:9
    goTo https://***/build/assets/app-a0cc4354.js:9
    next https://***/build/assets/app-a0cc4354.js:9
    anonymous https://***/livewire/livewire.js?id=e2b302e9 line 1249 > AsyncFunction:3
    generateEvaluatorFromString https://***/livewire/livewire.js?id=e2b302e9:1271
    tryCatch https://***/livewire/livewire.js?id=e2b302e9:1191
    removeListener https://***/livewire/livewire.js?id=e2b302e9:3779
    handler4 https://***/livewire/livewire.js?id=e2b302e9:3114
    handler4 https://***/livewire/livewire.js?id=e2b302e9:3179
    wrapHandler https://***/livewire/livewire.js?id=e2b302e9:3116

Browser and system

Client:
Firefox 121 on Fedora 39

Server:
Alpine 3.19
Lychee Docker 5.1.0

[ildyria]

I installed Firefox 121 on my debian.
I am not able to reproduce this behaviour.
https://stackoverflow.com/questions/60995846/three-js-domexception-the-operation-is-insecure-most-likely-cross-domain

From this and APP_URL (https://***) does not match the current url (http://***).
My guess is that this is more of a configuration problem:

• check that your reverse proxy is forwarding the proto https,
• set APP_FORCE_HTTPS=false if necessary.

I strongly believe that this is not a Lychee problem.

[lilian-pouliquen]

Thank you for your answer. I was testing your advice but I will struggle a bit. I use Lychee behind two reverse-proxies, the first is in https and the second (internal) is in front of Lychee. It makes it complicated to set up. I'm coming back to you when I manage to make it work

Thanks again!

[lilian-pouliquen]

Hello @ildyria ,
I finally got it to work!
As you said: it is not a Lychee issue. But forwarding proto https was not enough in my case. I needed to set up actual https all the way through to the app.

Initially, my server was working as the following:

Internet > (https) Main reverse-proxy > (http) Environment reverse-proxy > (http) Apps

I needed to use SSL all the chain long to make Lychee say that I was in https, so I added SSL certs to the Environment reverse-proxy and Lychee container

Thanks for your time, help and your amazing work on this project!