How to do Video Trimmer in Reactjs - reactjs

I want to do a video trimmer in reactjs. I have searched and I got the package
Package name: npm i react-video-trimmer
Here is the example of this package,
Example code:
import React from "react";
import ReactVideoTrimmer from "react-video-trimmer";
import "react-video-trimmer/dist/style.css";
const Trimmer = () => {
const handleVideoEncode = React.useCallback(result => {
console.log("Encoding Result:", result);
});
return (
<div>
<ReactVideoTrimmer
onVideoEncode={handleVideoEncode}
timeRange={{ start: 10, end: 100 }}
/>
</div>
);
};
But, I don't know how to feed the video URL which I have to trim and I'm not clear about how this package is working.
So, please tell me how this package is working. And, Is there any alternative way to create a video trimer in Reactjs?

Related

Trying to add anime.js in react but not working

I am trying to implement animejs in my react projects. But unable to run my first code. I already installed my animejs package. It would be great if you would help me learn this and guide me on how to do it. Here is the code, help me to resolve the error.
import {useEffect} from 'react'
import anime from 'animejs/lib/anime.es.js';
// import { easings } from 'animejs';
export default function Homeanime() {
const fontSize = {
fontSize:'40px'
}
useEffect(() => {
const basicTimeline = anime.timeline({autoplay:true})
basicTimeline
.add({
target:'.check',
translateX: 250
})
},[])
return (
<>
<h1 className='p-5 check' style={fontSize}>Working</h1>
</>
)
}

Implementing react-tridi 360 product viewer in Next JS

I've been looking for a good 360 product viewer library and I came across react-tridi. According to the library documentation you need to simply insert a <Tridi/> component and pass in some props. The issue that I'm facing, however, is the that I'm getting a "window not defined" error message. I read that this is due to Server Side Rendering where window is not available. As a workaround I've tried to use Next Dynamic in the following way but I still can't make it work.
import React from "react";
import Tridi from "react-tridi";
import dynamic from "next/dynamic";
const DynamicComponentWithNoSSR = dynamic(
() => {
return <Tridi location="../public/spin" format="jpg" count="120" />;
},
{
ssr: false,
}
);
function Collection() {
return (
<div className="w-96">
{" "}
<DynamicComponentWithNoSSR />
</div>
)
}

<ReactMapGL/> component shows blank screen

I was following lama dev youtube channel's video for using mapbox in reactjs.
But when I run the reactjs script, my map component is empty.
video:
https://youtu.be/9oEQvI7K-rA
source code:
https://github.com/safak/youtube/tree/mern-travel-app
my code
import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';
function App() {
const [viewport, setViewport] = useState({
width: "100vw",
height: "100vh",
latitude: 46,
longitude: 17,
zoom: 8,
});
return (
<div className="App">
<ReactMapGL
{...viewport}
mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX}
onViewportChange={nextViewport => setViewport(nextViewport)}
/>
</div>
);
}
export default App;
I followed the coding and in the react part, I created the .env file, installed and imported react-map-gl and used the . For some reason I see only blank screen instead of a map.
I tried the example code from the uber library visgl.github.io, also the source code that you have provided, still the screen was blank.
followed these solutions:
Mapbox blank map React-map-gl | ReactJS
react-map-gl: Map Does Not Appear
Map not showing up when using react-map-gl and create-react-app
but still the Component is empty.
Any help would be useful, thanks!
EDIT 1:
I found this error in the firefox console:
An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling
After the comment from J-007, I added these lines below the previous import lines:
import mapboxgl from 'mapbox-gl';
mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
and the map is working fine now.
EDIT:
This worked only in one project-
https://codesandbox.io/s/react-test-ivbkv?file=/src/App.js
then it didn't work in the example provided in
http://visgl.github.io/react-map-gl/docs/get-started/get-started
Then I found -
https://medium.com/geekculture/building-an-interactive-map-with-mapbox-react-f335384f4863:
and using npx create-react-app projectname exactly as mentioned in this article, i find the map working even in http://visgl.github.io/react-map-gl/docs/get-started/get-started script.
EDIT 2:
Copy pasting code from the Medium article (just in case) -
npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-map-gl-geocoder
npm start
import React, { Component } from 'react';
import ReactMapGl from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';
const mapboxToken = 'YOUR API KEY'
class Map extends Component {
constructor() {
super()
this.state = {
viewport: {
width: '100vw',
height: '100vh',
latitude: 40.78343,
longitude: -73.96625,
zoom: 11
}
}
this.handleViewportChange = this.handleViewportChange.bind(this)
}
handleViewportChange(viewport) {
this.setState(prevState => ({
viewport: {...prevState.viewport, ...viewport}
}))
}
render() {
return (
<ReactMapGl
{...this.state.viewport}
onViewportChange={viewport => this.setState({viewport})}
mapboxApiAccessToken={mapboxToken}
mapStyle="mapbox://styles/mapbox/streets-v10"
/>
)
}
}
export default Map;
What worked for me, was from this page:
http://visgl.github.io/react-map-gl/docs/get-started/get-started
npm install --save react-map-gl mapbox-gl
whereas, I believe the tutorial was just react-map-gl

install quilljs-markdown on react

I need such an editor on react https://cloverhearts.github.io/quilljs-markdown/ , as you can see in it you can put markdown characters directly into the text.
when I do this
import React, { Component } from 'react'
import './App.css'
import ReactQuill from 'react-quill'
import Quill from 'quill'
import QuillMarkdown from 'quilljs-markdown'
const App = () => {
const editor = new Quill('#editor', {
theme: 'snow'
})
new QuillMarkdown(editor)
return (
<div className='app'>
{/*<MyComponent/>*/}
<div id="editor"></div>
</div>
)
}
export default App
I get error TypeError: Cannot read property 'on' of undefined
as I understand I need jQuery for work, but I use react, I found https://www.npmjs.com/package/react-quill this quilljs for react, but I don't know how to combine it with markdown https://www.npmjs.com/package/quilljs-markdown
can anyone help?
I found the solution for this after hours of trying this out.
What you have to do is this:
Create a module for ReactQuill
Register the module.
Pass modules to react quill
Shown Below.
Step 01
const modules = {
markdownOptions: {}
};
Step 02
Quill.register('modules/markdownOptions', QuillMarkdown);
Step 03
<ReactQuill
modules={modules}
/>
It seems like you are trying to initialize the Quill instance and the markdown module before the editor is ready.
Use useEffect hook to initialize it after the div has been rendered:
import {useEffect} from 'react';
...
useEffect(() => {
const editor = new Quill('#editor', {
theme: 'snow'
});
new QuillMarkdown(editor);
});

How to run React JS build in React-Native Webview?

I created complete offline ReactJS web application and I want to run it from android application from Web View using React-Native.
I followed the following procedure to do so:
1. I created a compiled ReactJS web application got the build using the following command:
npm run build
Then I created react-native project and placed the build folder with following architecture
I updated App.js with the following content:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, WebView} from 'react-native';
import {roscon} from "./build/index.html";
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{height: 300, width: 300,overflow:'hidden' }}>
<WebView
source={{uri: roscon}}
scalesPageToFit={true}
domStorageEnabled={true}
javaScriptEnabled={true}
startInLoadingState={true}
/>
</View>
);
}
}
After running this code I expected it to run my ReactJS Web application, instead I got white screen.
Can you please tell what can be the causing issues and how i can make my ReactJS Web App run on react-native?
Note: I was able to run generated build folder using npm command
serve -s build
But I still can't figure out how to port it to react-native project as WebView
After research and testing, I found a solution.
The main issue i found was the compiled build folder is rendered as static html. And it needed a server to serve pages.
So, I followed this link for getting build project to get it up and running
Then, integrating it with nodejs Android Project Samples to get my build folder running in android as a Webview.
Note: I also tried react-snapshot and react-snap but they didn't gave satisfactory results.
Try to require the html file correctly and pass it in to source prop in this way:
<WebView
source={require('./build/index.html')}
/>
Install
npm install react-native-react-bridge
These are used to render React app in WebView
npm install react-dom react-native-webview
Requirements
react 16.8+
react-native 0.60+
Usage
Fix metro.config.js to use babelTransformer from this library.
module.exports = {
transformer: {
babelTransformerPath:
require.resolve('react-native-react- >.
.bridge/lib/plugin'),
...
},
};
Make entry file for React app. web.js
import React, { useState } from "react";
import {
webViewRender,
emit,
useSubscribe,
} from "react-native-react-bridge/lib/web";
const Root = () => {
const [data, setData] = useState("");
// useSubscribe hook receives message from React Native
useSubscribe((message) => {
if (message.type === "success") {
setData(message.data);
}
});
return (
<div>
<div>{data}</div>
<button
onClick={() => {
// emit sends message to React Native
// type: event name
// data: some data which will be serialized by JSON.stringify
emit({ type: "hello", data: 123 });
}}
/>
</div>
);
};
// This statement is detected by babelTransformer as an entry point
// All dependencies are resolved, compressed and stringified into one file
export default webViewRender(<Root />);
Use the entry file in your React Native app with WebView.
import React from "react";
import WebView from "react-native-webview";
import { useBridge } from "react-native-react-bridge";
import webApp from "./WebApp";
const App = () => {
// useBridge hook create props for WebView and handle communication
// 1st argument is the source code of React app
// 2nd argument is callback to receive message from React
const { ref, source, onMessage, emit } = useBridge(webApp, (message) => {
// emit sends message to React
// type: event name
// data: some data which will be serialized by JSON.stringify
if (message.type === "hello" && message.data === 123) {
emit({ type: "success", data: "succeeded!" });
}
});
return (
<WebView
// ref, source and onMessage must be passed to react-native-webview
ref={ref}
source={source}
onMessage={onMessage}
/>
);
};

Resources