liqvidjs / liqvid Goto Github PK

View Code? Open in Web Editor NEW

748.0 748.0 38.0 1.38 MB

Library for interactive videos in React

Home Page: https://liqvidjs.org

License: MIT License

TypeScript 91.39% JavaScript 4.24% Stylus 4.24% HTML 0.12% CSS 0.01%

animation javascript liqvid react video

liqvid's People

Contributors

Stargazers

Watchers

Forkers

fun2tech waldenn unelma catain nksaraf justmelnyc dennis-leeyinghui sinhp manohar27 futureinfinity codesharpdev woodytang hoodmane mrhyperbit zonayedpca zerolands vipul1306 lgh06 ajunlonglive cliffordfajardo u-ashish nurbekgithub algorithmlabs groobemx pappoe quant1-eduardo quant1-tech gschri rameshdhas vitaly-z rk111 anishg-cn convivitybackendteam kendrickcheung007 yzaroui abukhalil-forks jamievaughn eyesnareinc

liqvid's Issues

Rename HookFunction / HookMap

This is modeled after WordPress's notion of hooks, but is confusing with the new React Hooks

Keymap should not throw error when unbinding a thing that is no longer bound

since other code could delete the bindings to override keyboard controls.

Document the hiding method

Explain why we use opacity: 0; pointer-events: none; instead of visibility: hidden;.

Player pauses when trying to play Video in iOS

The scenario is, there is a Video element which starts at, let's say, 5 second. So, the video plays fine for 5 seconds and suddenly it pauses and never starts again, until manually played again.

This happens in iOS Chrome (and maybe Safari as well).

I think the issue might be the following:

@ysulyma can you please let me know how to fix this?

CSS should not depend on external fonts

Audio page broken in docs

Hi I noticed that the Audio page, in the API docs won't load, I would be very interested in knowing if there is also a schedulable Audio player object...

TIA, and great job on this softwre...

How to control the frame rate?

Is there a way to change the frame rate in react?

Example integration pages do not render the examples

For example, I do not see a demo here.

My browser console has the error:
Uncaught TypeError: Failed to resolve module specifier "@liqvid/katex". Relative references must start with either "/", "./", or "../".

I have included this, <script src="https://unpkg.com/@liqvid/host/lv-host.js"></script>, in the index.html <head> tag, but still when I click Fullscreen icon in the player in iOS it is not making the player Fullscreen. It just toggles the icon.

Please help.

package information:
"liqvid": "^2.1.5",
"liqvid-scripts": "0.0.5",

Doesn't work in Strict Mode

Currently, Liqvid doesn't work in React's Strict Mode. This is mainly due to double-renders (facebook/react#12856, facebook/react#20835) along with how we set up keyboard shortcuts.

[BUG] Can't import the named export 'Children' from non EcmaScript module (only default export is available)

I installed liqvid via npm and tried importing the components like so:

import { Player, Script } from "liqvid";

After compiling, this is result from the console:

Can't import the named export 'Children' from non EcmaScript module (only default export is available)

Getting an error when refreshing the player?

I am getting the following error when I refresh the player after a change in the script:

Uncaught TypeError: Cannot read properties of null (reading 'buffered')
    at getBuffers (liqvid.js:895:1)
    at HTMLAudioElement.updateBuffers (liqvid.js:907:1)

What i am doing is, I have a state variable initialized, and i have used useEffect to check when there is a change in the script. In the useEffect i have set the initialized value to false and then to true with a setTimeout so that the player is removed from dom and re-rendered again so that the script change is reflected.

const [initialized, setInitialized] = useState(false);

useEffect(() => {
  setInitialized(false);
  setTimeout(() => {
    setInitialized(true);
  }, 0);
}, [script]);

if (!initialized) {
  return null;
}

return <Player ... ></Player>

Can you please tell if I am doing anything wrong, or is there a way to resolve the issue?

Add support to GSAP

I know that liqvid has animation support. However, I think that can be enhanced/simplified supporting GSAP, even the community (free) version)

Utils.mobile.onClick and Utils.interactivity.dragHelperReact are not working after upgrading to 2.1.8

After upgrading the package from 2.1.5 to 2.1.8, for the video issue (#31), the onClick and dragHelperReact are not working correctly on mobile.

The following error is showing in the console:

@ysulyma can you please check?

[feature request] Add function to import mp4 as background video.

That way this could be used to (background) embed youtube/video.
It would be very helpful to add additional information to or add clickable links to resources etc.

Thank you for your consideration.

When developing and run npm start what is the URL to see the result?

I expected to get some info like: go to localhost:3000 or something like that, but I didn't.

So, at what port I can see the result?

Resizeable video canvas

In the demo video at the project homepage, it's possible to e.g. resize the text box that appears to demonstrate how to edit the video's subtitle; however, the video's canvas does not change when the content gets larger, so the additional content overflows and gets hidden. Like this:

Some possible solutions:

Make the video canvas a scrollable container
Allow the video canvas to be resized, with a handle similar to that of the textarea
Automatically grow the video canvas so that all content within is visible

new Script() not working with number duration

when calling new Script(markers) with the markers having durations as number instead of string, it is throwing error.

I think in the following code the parseTime function should check if the duration is of type number or string before operating on the duration.

      if (marker.length === 2) {
        const [, duration] = marker;
        marker[1] = time;
        marker[2] = time + parseTime(duration);
      } else {
        const [, begin, end] = marker;
        marker[1] = parseTime(begin);
        marker[2] = parseTime(end);
      }

      time = marker[2];
    }

The error is following:

       
      Uncaught (in promise) TypeError: str.split is not a function
   at parseTime (liqvid.mjs:887:1)
   at new Script (liqvid.mjs:3251:1)

@ysulyma please check.

How to deploy to a static site?

If I use create-react-app I use npm build, but in this case, how do I do it?
If I don't need to record audio, do I still need install Express?

Speed dialog looks bad on mobile

`<Audio>`/`<Video>` don't restart when playback reaches end

Deprecate Cursor

Now available in the rp-cursor package

opacity-hiding sometimes breaks on iOS

Is it possible to have a child playback?

@ysulyma I have a query regarding one use case in my application. Is it possible to have a child playback inside a playback, so that when the child playback is playing the parent playback will be paused and when the child playback ends then the parent will play again?

If this is not present at the moment, can you please recommend a hack or something to achieve this?

Consider an integration with Temml

Now that chrome based browsers (from chrome 109) (as well as firefox) support mathml (core), maybe consider an integration with temml.

I think it will work as a drop in replacement for katex.

I found it renders much faster without "flashing".

I recommend the latin modern woff2 font from gust.

How to preload all static assets like video/image before rendering in client end?

Is there a way to load all the videos/images before rendering in the browser, because currently the player is running while the video is not loaded. Hence, the video is not in sync with the player time.

Video element issue

When adding a Video element which has duration less than the total duration of the playback, then the playback is pausing when the video ends. @ysulyma Can you please check?

You can reproduce the issue by the following steps:

Go to https://liqvidjs.org/docs/reference/Video.
Change the line 7 in the code segement from ["train/", "0:20"] to ["train/", "0:30"]
Then run the video, you will see that at 23s, when the video ends the player will pause automatically.

Liqvid version upgrade issue

I upgraded the Liqvid package in my React project from 2.0 to 2.1 and now when I try to run the project using npm start it is throwing the following error in the command line:

SyntaxError: ..\node_modules\liqvid\dist\liqvid.mjs: Support for the experimental syntax 'classProperties' isn't currently enabled (2052:12)

@ysulyma can you please check this?

Use contextType instead of Broadcaster/Receiver

Keyboard shortcut to skip back

It seems like it's possible to skip ahead by pressing the right arrow key, but the left arrow key doesn't do anything. It would be nice if it skipped the video back a few seconds (ideally less than the amount that's skipped forward; as a data point, Google Podcasts' player skips ahead by 30 seconds and back by 10 seconds).