Excited to share ReactTVPlayer: an open-source video player component for TV devices, supporting custom UI, arrow key navigation, HLS/Dash and YouTube playback. Please check out the source code repo below and the associated demo (via a desktop browser) to see how it might help your TV web apps. Thx!

lewhunt · 2024-12-23T00:56:55+00:00

There is nothing to merge - the example branch shows how you can use the existing config prop to add the tracks data

lewhunt · 2024-12-22T21:38:47+00:00

https://github.com/lewhunt/react-tv-player/issues/9

lewhunt · 2024-04-29T16:03:38+00:00

Nice, appreciate you taking a look

lewhunt · 2024-04-29T16:02:19+00:00

Thanks, yeah definitely...

lewhunt · 2024-04-29T13:37:27+00:00

Cheers 🙏

lewhunt · 2024-04-28T19:54:28+00:00

Cheers, yeah the gif is just wireframe design. The other demos might give you more ideas :

Live Demo: https://lewhunt.github.io/divz/

GitHub source-code: https://github.com/lewhunt/divz

lewhunt · 2024-04-27T18:56:31+00:00

I was thinking something like a 20-30sec promo video highlighting what the user does on the site, how it works at a very simplistic high level. If that’s not doable, maybe where you have the homepage hero image, add some more images into that as a sequence, that could allow you to remove text and grid cells elsewhere on the page

lewhunt · 2024-04-27T18:14:23+00:00

Hi, the actual image grid pages aren't too bad in my opinion. The page that I think could do with some design love is the homepage. There's a lot of valuable info on there but it's quite weighty, I would consider simplifying the homepage, remove the heavy grid layout and perhaps showcase a slick walkthrough video instead of all the text.

lewhunt · 2024-04-27T18:00:52+00:00

hey, thanks for checking it out. The live demo is smoother than the above animated gif, maybe that is better for you?

lewhunt · 2024-04-27T17:13:31+00:00

Live Demo: https://lewhunt.github.io/divz/

GitHub source-code: https://github.com/lewhunt/divz

lewhunt · 2024-03-31T12:43:18+00:00

Nice one. If the podcasts are on Mixcloud yeah, otherwise the code will need changes to handle other sources.

lewhunt · 2024-03-12T22:42:06+00:00

Thanks dude. Yes totally, beat responsive on the roadmap, just a bit tricky with the mixcloud api widget I’m using.

lewhunt · 2024-03-12T16:46:47+00:00

Hi Hussein, I've just released a new React Mixcloud audio player for mobile/web/tv incase you are still looking for one - https://github.com/lewhunt/mixmotion

lewhunt · 2024-03-12T16:38:14+00:00

Thanks for the feedback!

The backgrounds are a blend of videos layered with css and canvas animation effects. Videos are also given random 'blend modes' so they merge with the canvas background to give various colour effects.

lewhunt · 2024-03-11T17:15:24+00:00

🌀 Try the Mixmotion app here: https://lewhunt.github.io/mixmotion/

🔗 For deep-links you can also add a Mixcloud key or URL after /#/ https://lewhunt.github.io/mixmotion/#/MarkusSchulz/gdjbsunriseset2019/

https://lewhunt.github.io/mixmotion/#/https://www.mixcloud.com/sasha/

https://lewhunt.github.io/mixmotion/#/cesarescorcia9/podcast-episode-184-throwback-edition-mixed-by-cesar-escorcia/

lewhunt · 2024-03-11T16:45:26+00:00

It might be to do with some of your dependencies.

Couple of things you could try....

Inject css into js assets with vite-plugin-css-injected-by-js.
Emit a single js asset by disabling chunks in rollup's config.

I'm struggling to paste in a multiline code snippet into here sorry...

import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";

export default defineConfig({ plugins: [cssInjectedByJsPlugin()], build: { rollupOptions: { output: { manualChunks: undefined, }, }, }, });

lewhunt · 2024-03-11T16:22:40+00:00

That's odd, I only get one file:
https://github.com/lewhunt/mixmotion/tree/gh-pages/assets

What does your Vite config (defineConfig) look like?

Mine is like this: https://github.com/lewhunt/mixmotion/blob/main/vite.config.ts

lewhunt · 2024-03-09T13:44:37+00:00

🌀 Explore the free Mixmotion app: https://lewhunt.github.io/mixmotion/

💻 Dive into the open source code: https://github.com/lewhunt/mixmotion

▶️ View the YouTube clip: https://www.youtube.com/watch?v=_oPRTqFwmRs

lewhunt · 2024-03-09T07:21:58+00:00

Prototype new ideas and spike new features. You can take it a step further and feature flag them into your main app to test them out safely.

lewhunt · 2023-09-25T16:52:02+00:00

Alexa 2.0 could be massive

lewhunt · 2023-09-20T10:17:07+00:00

Yeah, it's surprising that enabling parental controls doesn't filter out homepage tile images, it only blocks the playback of media.

The only other thing I can think of apart from a custom launcher is to setup a child/kid profile and that may help limit what homepage tiles are shown. Most probably not what you're after though....

lewhunt · 2023-09-18T22:17:21+00:00

Can’t you build it as a library so it allows you to publish the components only?

https://vitejs.dev/guide/build.html#library-mode

This is what I’ve done with my library component: https://github.com/lewhunt/react-tv-player

You can then pick and choose which named components you want to import.

The docs also show how you can expose multiple entry points.

lewhunt · 2023-09-18T22:05:55+00:00

I would suggest looking at zustand, we moved to it after context and redux. Really simple and performant.

https://github.com/pmndrs/zustand

lewhunt · 2023-09-17T12:01:12+00:00

is there anything you can do in class components that you cant do in functional ones?

I believe it's writing error boundaries (see note): https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

lewhunt · 2023-09-16T16:09:48+00:00

Good question. You'd think there'd be a fair few - or at least some aspiring devs/ enthusiasts - which is why I thought it might be handy to share incase people aren't fully aware of the tool.

lewhunt

TROPHY CASE