DEV Community: Lewis Hunt

Introducing DIVZ - a React component to scroll, swipe & zoom through content on the 3D z-axis

Lewis Hunt — Wed, 01 May 2024 11:41:07 +0000

I'm excited to share DIVZ - a free open source React UI component that lets you scroll, swipe & zoom through HTML elements on the 3D z-axis. Think of it as a new, experimental way to navigate and present web content 🙌

👉 Try out the demos here 👈

👉 Dive into the source code 👈

Installation

Developers can install Divz as an open source component to use in React apps. Quickest install method is via the npm install command below:



npm install divz

Usage

After install, import the component and render it in your app or page, wrapping it around your list of divs or other HTML elements:



import { Divz } from "divz";

function App() {
  return (
    <Divz>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Divz>
  );
}

The demo source code illustrates how the component can be initialised with more props - along with images and videos inside the child divs - for a richer user experience.

Why Divz?

Divz was initially created to showcase portfolio work within a pseudo-3D environment, loosely inspired by Apple's Time Machine interface which allows the user to zoom through historical Finder windows:

What Sets It Apart?

Simplified Integration: Divz is designed to be responsive and easy to use, acting as a straightforward wrapper around a list of divs or other HTML elements.
Diverse Applications: While the demos showcase its versatility as a carousel, slideshow, or gallery component, Divz opens the door to a range of other potential uses. Consider it an innovative, experimental method for navigating web content.
Broad Device Support: Divz accommodates various navigation modes, including touch for mobile devices, cursor/trackpad for desktop users, and arrow keys for TV devices.

How Does It Work?

Under the hood, Divz performs CSS3 transforms on the core component and the child HTML elements, set dynamically with React TypeScript. The component is packaged using Vite to allow npm library integration.

Support

I hope this has given a good intro to the component and you get some use out of it for your own projects!

💬 Fire over a comment if you have any feedback, requests or issues 🐛

⭐ Give it a Github star if you like the component or want to bookmark it 🙏

Introducing Mixmotion - an Open Source Music Player with Fullscreen Visual Effects

Lewis Hunt — Fri, 15 Mar 2024 13:19:41 +0000

I'm excited to share Mixmotion Player - a free open source React music player with Mixcloud integration and dynamic fullscreen visual effects 💥

On playback, you'll enter an immersive lean-back mode, with the ability to toggle on/off a vast selection of dynamic background visuals.

To quickly see it in action click on the video above, you can also check out the app or source code via the links below:

👉 Try out the free app here 👈

👉 Dive into the source code 👈

Installation

Developers can install Mixmotion Player as an open source component to use in React apps. Quickest install method is via the npm i command below:

npm install mixmotion-player

Usage

After install, import the player and render MixmotionPlayer in your own app with a Mixcloud URL. It will use default settings for the other non declared props.

import { useEffect, useState } from "react";
import { MixmotionPlayer } from "mixmotion-player";

function Demo() {
  const [url, setUrl] = useState("");

  useEffect(() => {
    setUrl("https://www.mixcloud.com/discover/trance/?order=latest");
  }, []);

  return <MixmotionPlayer url={url} />;
}

export default Demo;

The advanced demo and official web app illustrate how the component can be customised further. Props are specified for custom buttons, video backgrounds and local data (saved items). A complete list of props are detailed further down this page.

<MixmotionPlayer
  url={url}
  showsData={getSavedData}
  customButtons={customButtons}
  backdropVideoList={backdropVideoList}
  enableBackdropVideo={true}
></MixmotionPlayer>

The Github readme details the props available plus the more advanced methods and hooks available to you.

Why Another Player?

There are plenty of web players and widgets already available from the likes of Soundcloud and Mixcloud that you can integrate into your app.

Mixmotion offers something different; an immersive, full-screen playback experience with unique visual effects, while still providing free access to Mixcloud's vast music catalogue.

What Sets It Apart?

Mixcloud Integration: Simple yet versatile access to Mixcloud content that goes beyond their official widget. Access playlists, user sets, genres, tags and individual shows, with the ability to privately save favourites via local storage and share mixes.
Dynamic Visuals: Artwork combined with canvas effects and video motion backgrounds generate a captivating blend of imagery within a rich, immersive music player.
Broad Device Support: Designed for mobile, desktop and TV devices. Touch, cursor and arrow-key navigation help make the user experience smooth across platforms.
Future Considerations: Integration with local file paths, audio streams and other music services like Soundcloud. Real-time audio visualizations and beat detection are also being considered.

How Does It Work?

Under the hood, the component is built on top of the official Mixcloud API and Mixcloud Widget. It also utilises another custom component of mine - Dynamic Backdrop - to create a blend of videos layered with css and canvas animation effects. Videos are given random 'blend modes' so they merge with the canvas background to give various colour effects.

Support

I hope this post has given you a good intro to the web app & component and you get some enjoyment out of the music and visuals!

💬 Fire over a comment if you have any feedback, requests or issues 🐛

⭐ Smash us a Github star if you like the app or component 🙏

🔗 Share your favourite sets in the app to support the talented DJs 🙌

Introducing ReactTVPlayer: An Open Source Media Player for TV Apps on Devices 📺 🖥️

Lewis Hunt — Wed, 20 Sep 2023 18:28:33 +0000

I'm excited to share React TV Player - a free to use open source React media player component designed for TV, aiming to lower the barrier to entry and simplify playback in big-screen web apps! 🙌

With a customizable UI and easy arrow-key navigation, it can play a variety of urls like Dash/HLS streams and it even supports YouTube, Twitch & Vimeo videos - saving the cost and hassle of additional media encoding 🎉

Live demo (for desktop browsers)

Github repo (full readme info and source code)

Installation

It has been built as an npm package for easy install:



npm install react-tv-player

Usage

Then just import the player and render it in your App/Page



import React from "react";
import { TVPlayer } from "react-tv-player";
function App() {
  return (
    <>
      <TVPlayer url="https://www.youtube.com/watch?v=SkVqJ1SGeL0" />
    </>
  );
}

The demo's source code App.tsx illustrates how the component can be initialised with more props such as metadata, custom buttons, preview images and multiple media...



<TVPlayer
  title={mediaList[mediaIndex].title}
  subTitle={mediaList[mediaIndex].subTitle}
  url={mediaList[mediaIndex].url}
  light={mediaList[mediaIndex].preview}
  customButtons={customButtons}
  mediaCount={mediaList.length}
  onLikePress={handleLike}
/>

The Github readme details the props available plus the more advanced methods and hooks available to you.

Why Another Player?

In the dynamic landscape of the OTT TV industry, I've dedicated years working with various players. During this journey, two persistent challenges surfaced time and again: performant UI and compatible media encodings. These hurdles often forced us to heavily customise players and tackle streaming difficulties, leading to added costs and frustrating delays. 😫

Enter ReactTVPlayer, an open-source component that seamlessly integrates with your React applications...

What Sets It Apart?

It's designed for TV experiences out of the box, complete with customisable UI buttons and intuitive arrow key plus cursor navigation. 🎮 In addition to handling HLS and Dash streams effortlessly, it tackles the formidable challenge of playing YouTube and Vimeo urls directly on TV. Supporting YouTube/Vimeo eliminates the need for custom media encoding when it's not always necessary or even affordable. 🎉

How Does It Work?

Under the hood, this component harnesses the power of open-source libraries like Norigin Media's spatial navigation hook. It builds upon the excellence of React Player, which utilises hls.js and dash.js. Powered by React TypeScript (although you don't need to use TypeScript to make the most of it), this library is packaged efficiently using Vite, making integration a breeze. 💪

From Amazon FireTV sticks and Samsung Tizen Smart TVs to Xbox, LG webOS and even desktop-based web apps, ReactTVPlayer aims to cover a vast landscape of devices, especially those post-2018 with modern Chromium browsers. 📺 🖥️ 💻

I hope this post has given you a good intro to the component and how it can help simplify and enhance the playback experiences in your next big-screen web apps! 🙌