Solara•10mo ago

Ipyreactplayer not working in Solara - New Try

Hi, i've created an interactive videoplayer using ipyreact and reactplayer. It works everywhere (notebook, lab, voila, colab) but not in Solara. Ill want to give it a new shot as Solara is so nice and thats the last part missing in my app. https://github.com/widgetti/solara/issues/333 I tested the player with the same Video on Youtube I updated the Solara and reactplayer versions but i still get the same error

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'Player')
    at Vimeo.js:73:32

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'Player')
    at Vimeo.js:73:32

Interestingly the code to dynamically load the YT and Vimeo SDKs are almost the same. https://github.com/cookpete/react-player/blob/master/src/players/YouTube.js#L46 https://github.com/cookpete/react-player/blob/master/src/players/Vimeo.js#L31 I am really baffled how this can happen. Do you have any idea where i can have a closer look?

7 Replies

Monty Python•10mo ago

seidlr

<:issue_open:882464248951877682> [widgetti/solara] Ipyreactplayer not working with solara

I've created an interactive videoplayer using ipyreact and react-player. It works in - jupyter notebook, - jupyter lab, - voila > 0.5 - solara x To reproduce

git clone https://github.com/seidlr/ipyreactplayer
cd ipyreactplayer
pip install -e .
pip install solara
solara run solara.ipynb

git clone https://github.com/seidlr/ipyreactplayer
cd ipyreactplayer
pip install -e .
pip install solara
solara run solara.ipynb

This results in the error:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'Player')
    at Vimeo.js:108:35

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'Player')
    at Vimeo.js:108:35

Interestingly voila < 0.5 gave the same error, but in voila >= 0.5 works.

Created

Monty Python•10mo ago

src/players/YouTube.js line 46

getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, YT => YT.loaded).then(YT => {

getSDK(SDK_URL, SDK_GLOBAL, SDK_GLOBAL_READY, YT => YT.loaded).then(YT => {

src/players/Vimeo.js line 31

this.player = new Vimeo.Player(this.container, {

this.player = new Vimeo.Player(this.container, {

MaartenBreddels•10mo ago

Good to hear you like solara! I did some testing, and after finding https://github.com/cookpete/react-player/issues/846#issuecomment-624634491 i found out that adding <script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script> to the jinja template (see https://github.com/widgetti/solara/tree/master/solara/website/templates for an example) I managed to get it working, (I actuallt have a dev install and added it to the head of solara.html.j2, but it would be better to use index.html.j2 for now.. ) I hope we can find a proper fix, or maybe you have an idea where to look further

GitHub

solara/solara/website/templates at master · widgetti/solara

A Pure Python, React-style Framework for Scaling Your Jupyter and Web Apps - widgetti/solara

GitHub

Player from Vimeo does not work on any version. TypeError: Cannot ...

When I try to import the React-player component with a Vimeo video I get the following error: Uncaught (in promise) TypeError: Cannot read property 'Player' of undefined at Vimeo.js:102 I v...

MaartenBreddels•10mo ago

btw, if i set a breakpoint of the first line of player.js in the debugger, and delete define or delete.amd, it also works

Rob02OP•10mo ago

Nice! Thanks Maarten, Ill have a closer look. I had a look and i think the best solution is to use a custom template that loads the vimeo api in the beginning. I moved the Videoplayer code from a notebook into a Python file and solara component. I've used the directory structure:

pages/home.py
templates/index.html.j2

pages/home.py
templates/index.html.j2

Where the template contains this code

{% extends "solara.html.j2" %}
{% block header %}
    {% if production %}
    <link rel="canonical" href="https://solara.dev{{path}}">
    {% endif %}

    <script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>
    {{ super() }}
{% endblock %}

{% extends "solara.html.j2" %}
{% block header %}
    {% if production %}
    <link rel="canonical" href="https://solara.dev{{path}}">
    {% endif %}

    <script type="text/javascript" src="https://player.vimeo.com/api/player.js"></script>
    {{ super() }}
{% endblock %}

But it seems to have no affect when in run solara run . Just to make sure, if i provide a file in templates/index.html.j2 solara run finds it automatically or do i need to provide further instructions? I fixed it. I think running solara server from outside the pages folder will not be able to find the template looking at https://github.com/widgetti/solara/blob/master/solara/server/server.py#L42 I think there is no need for a "better" fix as Vimeo is only a small part of reactplayer. Ill just update the solara example in the ipyreactplayer repository to run from a folder with the right structure instead of a notebook and make sure to mention the issue in the example

Monty Python•10mo ago

solara/server/server.py line 42

def get_jinja_env(app_name: str) -> jinja2.Environment:

def get_jinja_env(app_name: str) -> jinja2.Environment:

MaartenBreddels•10mo ago

I also I get the same error in the notebook btw. Another fix is delete define.amd; on the top of the script, not pretty, and i'm not sure what sidefx it might have. The template should indeed be in ../templates, so the script needs to be in a folder

Gaming

Programming

Ipyreactplayer not working in Solara - New Try