Search the Community
Showing results for tags 'react'.
-
my code so far: import Prism from 'prismjs' //import 'prismjs/components/prism-markdown' import './md' import React, { useCallback, useMemo,useRef } from 'react' import { Slate, Editable, withReact,ReactEditor } from 'slate-react' import { Text, createEditor, Descendant,Transforms,Editor,Node,Range } from 'slate' import { useSelected, useFocused, useSlate } from 'slate-react'; import { withHistory } from 'slate-history' import twemoji from 'twemoji'; import Emoji from 'emoji-dictionary' import emojiRegex from 'emoji-regex'; const withEmoji = editor => { const { insertText } = editor; editor.insertText = text => { const regex = emojiRegex(); const match = text.match(regex); if (match && !editor.isInsertingEmoji) { editor.isInsertingEmoji = true; const emoji = { type: 'emoji', children: [{ text: text + ' ' }] }; Transforms.insertNodes(editor, emoji); editor.isInsertingEmoji = false; return; } insertText(text); }; return editor; }; const MarkdownPreviewExample = (props) => { const renderLeaf = useCallback(props => <Leaf {...props} />, []) const editor = useMemo(() => (withHistory(withReact(createEditor()))), []) const reset = () =>{ Transforms.delete(editor, { at: { anchor: Editor.start(editor, []), focus: Editor.end(editor, []), }, }); ReactEditor.focus(editor); } const getTextLength = (node) => { if (Node.string(node)) { return Node.string(node).length; } else { return node.children.reduce((acc, child) => acc + getTextLength(child), 0); } }; // Assuming you have the `editor` variable referring to your Slate editor instance const getTextLength2 = () => { if (editor.children) { try { return editor.children.reduce((acc, node) => acc + getTextLength(node), 0) } catch (error) { return 0 } }else{ return 0 } } props.reffer.current = {reset: reset, getTextLength: getTextLength2,editor: editor} const decorate = useCallback(([node, path]) => { const ranges = [] if (!Text.isText(node)) { return ranges } const getLength = token => { if (typeof token === 'string') { return token.length } else if (typeof token.content === 'string') { return token.content.length } else { return token.content.reduce((l, t) => l + getLength(t), 0) } } const tokens = Prism.tokenize(node.text, Prism.languages.markdown) let start = 0 for (const token of tokens) { const length = getLength(token) const end = start + length if (typeof token !== 'string') { let startP2 = start for (const subToken of token.content) { if (subToken.type === "punctuation") { const end2 = startP2 + getLength(subToken) ranges.push({ "punctuation": true, anchor: { path, offset: startP2 }, focus: { path, offset: end2 }, }) startP2 = end2 }else{ const end2 = startP2 + getLength(subToken) ranges.push({ [token.type]: true, anchor: { path, offset: startP2 }, focus: { path, offset: end2 }, }) startP2 = end2 } } } start = end } return ranges }, []) return ( <Slate editor={editor} initialValue={initialValue} onChange={(value) => {props.onChange(value)}}> <Editable decorate={decorate} renderLeaf={renderLeaf} renderElement={Element} placeholder={`Message @${props.inputName}`} /> </Slate> ) } const Leaf = ({ attributes, children, leaf }) => { return ( <span {...attributes} style={{ fontWeight: leaf.bold ? 'bold' : 'normal', fontStyle: leaf.italic ? 'italic' : 'normal', textDecoration: leaf.underlined ? 'underline' : 'none', ...(leaf.title && { display: 'inline-block', fontWeight: 'bold', fontSize: '20px', margin: '20px 0 10px 0', }), ...(leaf.boldItalic && { fontWeight: 'bold', fontStyle: 'italic', }), ...(leaf.punctuation && { opacity: '0.75', }), ...(leaf.list && { paddingLeft: '10px', fontSize: '20px', lineHeight: '10px', }), ...(leaf.strike && { textDecoration: 'line-through' }), ...(leaf.blockquote && { display: 'inline-block', borderLeft: '2px solid #ddd', paddingLeft: '10px', color: '#aaa', fontStyle: 'italic', }), ...(leaf.code && { fontFamily: 'monospace', backgroundColor: '#eee', padding: '3px', }), }} > {children} </span> ); }; const Element = ({ attributes, children, element }) => { console.log(element) switch (element.type) { case 'paragraph': return <div style={{"position": "relative"}} {...attributes}>{children}</div>; //case 'emoji': // return <div style={{"position": "relative"}} className='emoji' {...attributes}>{children}</div>; default: return <div style={{"position": "relative"}} {...attributes}>{children}</div>; } }; const initialValue = [ { type: 'paragraph', children: [{ text: '' }], }, ] export default MarkdownPreviewExample my goal, im trying to figure out how to parse emojis within slate. i wanted to use twemoji as they are a standard. i dont know where im going wrong, i asked github copolit and it just give me this (the withEmoji, nothing else) if i can get help, i can throw a few bucks to someone
-
After the recent drama in streamer world about stealing content/viewers by reacting, And also after hearing Linus mention this a few times in the WAN show that he is looking for a just way to to this got me thinking about a way to do this, However my developing skills are not developed enough to work this out on my own. I did some research on the topic and it seems doable (at least for YouTube) but i would need some people with backend knowledge to help out here. So the general layout would be to redirect people to a separate page where the stream would happen (can not be done on platform) and having a master page for the streamer with controlls. On this page would be two embedded video's One is the commentary, and the other is video that we are reacting to what i found we could use the Youtube Data API (you need to request a key to test this here) to poll the master page to see where they are in the video. As i understand this it will never be 100% correct because of network delays but unless you are way off grid it should be close enough. For example (please forgive me if the code has errors, i am quickly trying to make a mock-up and I asked GPT for help) something like this should be ran in the backend. from flask import Flask, request, jsonify app = Flask(__name__) # The current playback position of the video currentPlaybackPosition = 0 @app.route('/api/setPlaybackPosition', methods=['POST']) def setPlaybackPosition(): # Get the current playback position from the request global currentPlaybackPosition currentPlaybackPosition = request.json['currentTime'] return 'OK' @app.route('/api/getPlaybackPosition', methods=['GET']) def getPlaybackPosition(): # Return the current playback position of the video return jsonify({ 'currentTime': currentPlaybackPosition }) if __name__ == '__main__': app.run() The frontend would have the master page have something like this: <!DOCTYPE html> <html> <head> <title>YouTube Video Sync</title> </head> <body> <div id="player"></div> <script src="https://apis.google.com/js/platform.js"></script> <script> // Replace the video ID with your own var videoId = 'VIDEO_ID'; // Replace the start time with your own var startTime = 00; // Create the player object var player; // Load the YouTube IFrame Player API var tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Create the player object when the API is ready function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId: videoId, playerVars: { start: startTime }, events: { 'onStateChange': onPlayerStateChange } }); } // Listen for changes in the player state function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { // Get the current playback position var currentTime = player.getCurrentTime(); // Send the current playback position to the server var xhr = new XMLHttpRequest(); xhr.open('POST', '/api/setPlaybackPosition'); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.send(JSON.stringify({ 'currentTime': currentTime })); } } </script> </body> </html> where the player sends its info to the backend to see where we are in the video and lastly on the client side we should have this script (or at least a working version of it i didn't test this yet) // Replace the video ID with your own var videoId = 'VIDEO_ID'; // Replace the start time with your own var startTime = 0; // The maximum difference between the current playback position and the master data var maxDifference = 1; // Create the player object var player; // Load the YouTube IFrame Player API var tag = document.createElement('script'); tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // Create the player object when the API is ready function onYouTubeIframeAPIReady() { player = new YT.Player('player', { height: '360', width: '640', videoId: videoId, playerVars: { start: startTime }, events: { 'onStateChange': onPlayerStateChange } }); } // Listen for changes in the player state function onPlayerStateChange(event) { if (event.data == YT.PlayerState.PLAYING) { // Poll the server for the current playback position every second setInterval(function() { var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/getPlaybackPosition'); xhr.onload = function() { // Get the current playback position from the server var currentPlaybackPosition = JSON.parse(xhr.responseText)['currentTime']; // Get the current playback position of the video var currentTime = player.getCurrentTime(); // Calculate the difference between the current playback position and the master data var difference = Math.abs(currentPlaybackPosition - currentTime); // If the difference is greater than the maximum difference, seek to the master data if (difference > maxDifference) { player.seekTo(currentPlaybackPosition); } }; xhr.send(); }, 1000); } } So the working Theory is that the streamer would have his master video open where he can scroll thought the video and this gets polled and sent to a backend script while everyone watching polls the same backend script and their player will scrub until the time is in sync. although to make this a usable project. there would probably need to be a portal where you can drop video's on the fly and they would be synced to all the other pages etc so as you see i have a project that is way beyond me in skill and size. Would love to get some people together to opensource this as it would in my opinion be a great solution the the whole "your re leeching my viewers" problem as everyone will be watching the video in his own window and getting their own adds. etc. Would love to hear your initial thoughts.
-
Sorry if this is a terrible question but I don't know where else to turn. I have spent all day trying to have gunicorn bind to 127.0.0.1. So to start from the Top. I am making a website with a React frontend and a Flask backend all of this is running on centos7. I am using Nginx to manage the traffic I have it set up for SSL. I am using gunicorn to run Flask for production. Currently, I have this working where I have Nginx routing the traffic to React and then having the requests sent to gunicorn bound on 0.0.0.0:8000. In order to get this to work, I had to use 2 certificates one for each port. I was reading that binding gunicorn to an internal port would make it so I don't need the second certificate. When I try and run gunicorn with out the certs bound to localhost i get this error from React. Error: Network Error followed by ERR_CONNECTION_REFUSED to 127.0.0.1:8000/auth/login I have CORS enabled on the flask end and I'm using Blueprints. Here is my Nginx configurations server { listen 80; listen [::]:80; server_name my_server_name; return 301 https://$host$request_uri; } server { listen 443 ssl http2; listen [::]:443 ssl http2; server_name my_server_name; ssl_certificate "/etc/nginx/nginx-selfsigned.crt"; ssl_certificate_key "/etc/nginx/private/nginx-selfsigned.key"; ssl_dhparam "/etc/nginx/dhparam.pem"; ssl_protocols TLSv1.2; ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384"; ssl_prefer_server_ciphers on; ssl_session_tickets off; ssl_stapling on; ssl_stapling_verify on; proxy_set_header HOST $http_host; proxy_set_header X-REAL-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #proxy_set_header X-Forwarded-Proto $scheme; location / { proxy_pass "http://127.0.0.1:8080/"; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location /api/ { proxy_pass http://127.0.0.1:8000/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } location /auth/ { proxy_pass http://127.0.0.1:8000/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; } error_page 404 /404.html; location = /40x.html { } error_page 500 502 503 504 /50x.html; location = /50x.html { } } Any help would be greatly appreciated.
-
i just reinstalled my system to boost my system, after reinstall the usage of everything are reduced like new, but when i startup the system, the startup programs and apps start/work unbelievably slow. things like Steam and Directory Opus open about 5 mins after the system startup, and i tried to open some apps directly using their .exe file with file explorer, the mouse pointer shows that the system is working or loading, but the file explorer just dies there, nothing works with any clicks, in the task manager the bottom becomes Restart but not End task and if i click it the background will become black and the system seems like crashed... i tried to do the 5-way optimization in AIsuit3, but it always takes about 10min to start the program after restart, and the TPU part take the system to "blue screen error"... anyone familiar with this kind of experience? what wrong with my machine?
- 2 replies
-
- windows 10
- system
-
(and 2 more)
Tagged with:
-
Hello Everyone! I'm developing a mobile app for android and ios for a company I'm in. This is sort of a one time thing, and I don't seem to be able to get around without using a mac. Since it is a one time thing, we wouldn't like to buy a mac only for this, so I need to figure something out. I'm using React-Native, which is a javascript based thing, that works on android and ios. Theoreticly I don't need to make the same app twice, but in reality, there is a few things that needs to be customized for the two platform. That is where the problem starts. I don't have any way to try my app out on ios, nor to deploy it, and I wouldn't want to make an app without testing it first. I wouldn't mind it, if everything would be identicle for ios and android, but it just isn't Not possible with a virtual box, my hardware is not hackintosh compatible, and I don't have access to a mac. Ideas? On a different note: if you have any advise regarding app making, go ahead, I would like to talk about it with someone who actualy knows what he/she is doing, because I certainly don't. Thanks for everyone in advince! Reavt-Native https://facebook.github.io/react-native/docs/getting-started.html
-
The scrolling action of new react button feels bit laggy as it remains open fairly long compared to most fading items on site. Profile and thread previews are probably same with time being open, but their fading action is much slower and thus feels smoother. So either make scrolling start immediately after pointer is moved away, or make movement slower and more in like with 2 items I mentioned. Another thing is coloring of react button. Its really nice on Day Theme (while I think there could be more accent, like LMG orange being used (personal preference)). But in Night theme button bg is black and as such way too dark and depressing compared.
-
Has Linus done "reacting to old videos" yet??? If not, in the name of sweet, Holy, tiny, infant, 10lb 8oz (that's 4.7627kg to everyone else, but just doesn't have the same ring, does it??) baby Jeebus, upvote the shizz out of this and make Linus react to this video: It's the better than an Aussie punching a kangaroo to save his dog in a headlock!! Thank you. Sincerely, Enie
-
So, do you think a Inspiron 15 3000 Intel® Core™ i3-7020U, would be enough for light app development? I have a good desktop, so it would be just code and backend tests during the day as i have access to said desktop during the night.
-
I'm implementing a pop up window on a webpage where a user can leave a review on a web app I'm working on using React. Right now, I have a Modal that opens and the user is presented with a Star Rating component they can select a rating for and a Comment box they can type comments in. The issue I have right now is that while it all renders fine, I can't seem to make the Star Ratings clickable. i.e. If the user clicks on a star, it doesn't actually change the default value of 0 stars. If the user hovers over the stars, they animate fine. But it just doesn't seem to be selectable. Any thoughts? Star Rating Code in the Modal within render() <StarRating rating={this.state.rating} starRatedColor="red" changeRating={() => this.changeRating.bind(this)} numberOfStars={5} name='rating' /> Constructor for the page constructor() { super() this.state = { show: false, rating: 0 } }
-
I am learning React.js and am trying to start my own project and had a few questions. How should multiple pages be controlled? What should the folder structure look like? What are some best practices for react development? Do I have to make 2 projects if I want a web app and an apk?
-
- react
- javascript
-
(and 3 more)
Tagged with:
-
Fine Brothers Entertainment have just recently posted the conclusion to their React saga on medium. Link here: https://medium.com/@FineBrothersEnt/a-message-from-the-fine-brothers-a18ef9b31777#.yo5jkbx45 Filtering through their PR speak, here's what they plan on doing It will be interesting to see how this affects their current downward subscriber trend which has been hemorrhaging several thousands over the course of this whole affair.
- 15 replies
-
- react
- trademarks
-
(and 2 more)
Tagged with: