For the searchNotes bit, check that you fixed the issues in #13 where the function got accidentally deleted

We shouldn't be resolving to gateways in browsers that support p2p urls. Instead see if there's a DOM event that gets emitted when an image/video fails to load and listen to it at the document.body then take the event.target and attempt to rewrite its src. Video takes also have different ways of specifying sets of sources so we should account for that too.

Yep, will add the fallback logic.

This approach is not working:

    // Setup error listeners for media elements within this component
    this.addEventListener('error', event => {
      const target = event.target;
      if (target.tagName === 'IMG' || (target.tagName === 'SOURCE' && target.parentElement.tagName === 'VIDEO')) {
        const originalSrc = target.getAttribute('src');
        if (!originalSrc.startsWith('hyper://') && !originalSrc.startsWith('ipns://')) {
          target.setAttribute('src', resolveP2PUrl(originalSrc));
        }
      }
    }, true);
  }

What part doesn't work? What steps have you taken to debug it so far?

What part doesn't work? What steps have you taken to debug it so far?

I experimented with load events just to verify the functionality and discovered that IPNS and HYPER URLs are resolving as null, including the original/initial URLs. It may be due to the specific timing of how we handle p2p URLs, particularly when elements are processed before they are fully loaded or accessible in the DOM?

Example code:-

  connectedCallback() {
      // Listen for load events on the entire document body for images and video sources
      document.body.addEventListener('load', event => {
        const target = event.target;
    
        // Check if the loaded element is an image or a video source
        if (target.tagName === 'IMG' || (target.tagName === 'SOURCE' && target.closest('video'))) {
          const originalSrc = target.getAttribute('src');
    
          if (originalSrc && !originalSrc.startsWith('hyper://') && !originalSrc.startsWith('ipns://')) {
            const newSrc = resolveP2PUrl(originalSrc);
            console.log('Rewriting src for:', target, 'from:', originalSrc, 'to:', newSrc);
            target.setAttribute('src', newSrc);
          }
        }
      }, true);
  }

By resolving as null do you mean the originalSrc attribute is showing up as null or is the resolveP2PURL function returning null?

if (!originalSrc.startsWith('hyper://') && !originalSrc.startsWith('ipns://')) {
          target.setAttribute('src', resolveP2PUrl(originalSrc));
        }

This seems to only be trying to resolve the URL if it isn't p2p. Should the if statement be resolved and have us try to update the src attribute right away?

Which browser are you testing this on? Which URL/post?

Mind committing your code?

Mind committing your code?

Fixed it!
Will commit in a few hours.

Mind committing your code?

Fixed it! Will commit in a few hours.

Resolving urls before rendering in loadAndRenderPost worked: 675329f

Regarding the gateway fallback how is this approach in db.js?

export async function supportsP2P (url) {
  console.log(url)
  try {
    const response = await fetch(url)
    return response.ok
  } catch (error) {
    console.log('P2P URL loading failed:', error)
    return false
  }
}

export async function resolveP2PUrl (url) {
  if (!url) return url

  console.log('Attempting to resolve P2P URL:', url)

  if (isP2P(url)) {
    const p2pSupported = await supportsP2P(url)

    if (!p2pSupported) {
      if (url.startsWith(HYPER_PREFIX)) {
        return url.replace(HYPER_PREFIX, 'https://hyper.hypha.coop/hyper/')
      } else if (url.startsWith(IPNS_PREFIX)) {
        return url.replace(IPNS_PREFIX, 'https://ipfs.hypha.coop/ipns/')
      }
    }
  }

  return url
}

Can you elaborate on what the purpose of the proposed changes to db.js are?

Can you elaborate on what the purpose of the proposed changes to db.js are?

If the fetch fails, it will resolve the p2p URLs using gateways.

58366b8

The p2p-media.js is resolving to gateway if the fetch fails:

The problem is it's not replacing the src:
original img src:

p2p-image src:

We already have a fallback for detecting when p2p fetch fails: https://github.com/hyphacoop/reader.distributed.press/blob/main/db.js#L116 Lets stick to that without adding new stuff

p2p-image and p2p-video are working fine everywhere; the profile pictures in actor-profile, actor-profile-mini, and followed-accounts.

The media is not loading in the post content, I think there's something wrong with insertImagesAndVideos:

post.js:55 Updated p2p-image src after fallback: https://hyper.hypha.coop/hyper/hypha.coop/assets/images/posts/2022-05-12-ppl-sitting-unsplash.jpg
post.js:59 Replaced img with p2p-image having initial src: hyper://hypha.coop/assets/images/posts/2022-05-12-ppl-sitting-unsplash.jpg

I'm currently debugging the issue.

We should modify the supportsP2P function so it only checks for the p2p schemes once.

something like this

• have a global map of <protocol promise<boolean> | boolean>
• supports will get the scheme from the src
• check if the map has a value for the scheme if(supportMap.has(scheme)) return await supportMap.get(scheme)
• if doesn't have, set a promise for attempting to resolve the url scheme
• if request fails on a network error (no http response) set it to false and return false
• else set to true

This will reduce the number of http requests and improve performance.