[Videos] Video player - PR #1 - basic player

[mozzius]

Stacked on #4638

Basic video player. Other stuff is stacked on it, probably don't merge until those are ready

[render]

Your Render PR Server URL is https://social-app-pr-4731.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cq3fl6aj1k6c73fqd5a0.

[github-actions]

The Pull Request introduced fingerprint changes against the base commit:

Fingerprint diff

[{"type":"file","filePath":"package.json","reasons":["expoConfigPlugins"],"hash":"0f3b60558eddc1ed3905fe647b04f853cf1612bb"},{"type":"dir","filePath":"node_modules/expo-video/android","reasons":["expoAutolinkingAndroid"],"hash":"457855e16ebdbf23264e26af22dafdbaae35b0e8"},{"type":"dir","filePath":"patches","reasons":["patchPackage"],"hash":"229ffcdfaa62ce8cfdfe434d1f8354f0d34d20c9"}]

---

Generated by PR labeler 🤖

[github-actions]

Old size	New size	Diff
6.63 MB	7.01 MB	386.59 KB (5.70%)

---

[haileyok]

Quick glance this looks good. Gonna be tweaking it over time, so didn't super thoroughly test it.

[haileyok]

Are we going to be using this at all on web? I assume not with the intersection observer route it sounds like we're going to take.

I think I'm going to be using this a little in this implementation I cooked up on paper, but its fine to leave this logic here for now (or just empty this out, doesn't really matter)

[mozzius]

Nope, impl on web will be completely different

[haileyok]

not reviewing this because i think we address it on part 2, correct me if wrong tho

[mozzius]

Correct!

[haileyok]

remember to remove this line before merge

[haileyok]

or gate :)

[efstathiosntonas]

@mozzius Hi, did you encounter this on component unmount while testing it?

[Reanimated] The view with tag XXXX returned an invalid measurement response. Please make sure the view is currently rendered.

I tried to use the useFrameCallback on my (mobile) app and I've encountered the warning above. Note that while getting this warning it works fine in development mode, on production it will probably crash.

While using this though the error went away (and functionality remains the same):

    const checkInView = useCallback(() => {
      'worklet';
      if (!aref) return;

      const measurement = measure(aref);
      if (measurement === null) {
        return;
      }
      if (
        measurement.pageY >= 0 &&
        measurement.pageY + measurement.height <= windowHeight
      ) {
        if (hasLeftView.value) {
          runOnJS(onEnterView)();
          hasLeftView.value = false;
        }
      } else {
        if (!hasLeftView.value) {
          runOnJS(onLeaveView)();
          hasLeftView.value = true;
        }
      }
    }, [aref, hasLeftView, onEnterView, onLeaveView, windowHeight]);

    useEffect(() => {
      const interval = setInterval(() => {
        runOnUI(checkInView)();
      }, 500);

      return () => clearInterval(interval);
    }, [checkInView]);

I believe this is ligther too since it calls every 500ms instead on every single frame.

[haileyok]

@efstathiosntonas We're not actually using that anyway in favor of a better solution (thankfully!) There is some context on why the interval trick doesn't work in all cases and why useFrameCallback is the hack we landed on (and have been using for a while) in

social-app/src/view/com/util/post-embeds/ExternalPlayerEmbed.tsx

Line 139 in c75bb65

const frameCallback = useFrameCallback(() => {

If it's useful I don't mind sharing, gotta dig up the PR where I added it.