Cloudflare Developers•2mo ago

Visual Studio Code local preview of website works, but now it's broken on Cloudflare Pages?

Hi all, I own a website on Cloudflare called jippy.download. On the website I have a section where you can stream videos hosted on an R2 bucket. I updated this section to look more user friendly, and on a VSC local preview it works flawlessly. However, on Cloudflare Pages, certain things seem to not load, and navigation is broken. I'll be attaching a video soon showing the local & live preview of the site. If anyone knows what the issue is, please let me know. Thank you.

16 Replies

$URGEOP•2mo ago

there's the video ^^^ anyone still about to help? this is still not making any sense to me

<@235148962103951360>•2mo ago

The site looks very different at the moment. Did you roll back changes?

<@235148962103951360>•2mo ago

@$URGE Is this how it should look at the moment?

$URGEOP•2mo ago

Oh yeah, sorry that’s my bad. I made another pages instance, you can find the link here: https://jmutest.jippy.download

<@235148962103951360>•2mo ago

I'll have a look

<@235148962103951360>•2mo ago

Do you see the .video-block error? I am not on my PC at the moment

$URGEOP•2mo ago

Oh my, I didn’t see any of that I think it’s because I had copied links to the MP4, text and image files in the HTTP protocol Thank you for that, I’ll have a look soon That error would be for pages that don’t have a video block If it’s showing on the pages that do have a video block I’ll be damned

<@235148962103951360>•2mo ago

Just to confirm, the new test link you sent is the same as what is working in development?

$URGEOP•2mo ago

Yep Exact same MP4 and text files in the JavaScript code are all HTTPS, it must just be the images

<@235148962103951360>•2mo ago

Hmm, Ill have a look when I get to my PC @$URGE From what i see its because you are checking beat-tape.html in your script when its deployed, the .html isnt in your url

<@235148962103951360>•2mo ago

so your playlist ends up being an empty array

<@235148962103951360>•2mo ago

so when it calls loadVideo with the playlistEl index, your loadVideo function returns here:

    function loadVideo(index) {
        if (index < 0 || index >= playlist.length)
            return;

    function loadVideo(index) {
        if (index < 0 || index >= playlist.length)
            return;

because the index is out of bounds of the playlist array to test this with your deployment, I used Fiddler to change this line:

    if (page.includes('beat-tape.html')) {

    if (page.includes('beat-tape.html')) {

to this:

    if (page.includes('beat-tape')) {

    if (page.includes('beat-tape')) {

and it works I suggest maybe using a different approach to determining which playlist items to show

$URGEOP•2mo ago

Ohhhhhhh That’s really odd I would’ve never expected that Thank you I will definitely be having a look Yeah it’s just temporary cause I was more going for looks, the old website worked fine but it was just ugly

<@235148962103951360>•2mo ago

let me know how it goes

$URGEOP•2mo ago

THANK YOU!! i am forever in debt to you for this ❤️ thank you so much

Gaming

Programming

Visual Studio Code local preview of website works, but now it's broken on Cloudflare Pages?

Did you find this page helpful?