m1ngsama/chat-bubbles-for-yt
1
0
Fork 0
mirror of https://github.com/m1ngsama/chat-bubbles-for-yt.git synced 2025-12-24 10:51:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge remote-tracking branch 'upstream/main'

Browse source
This commit is contained in:
Bash Elliott 2023-06-27 15:26:57 +10:00
commit e416d69920
17 changed files with 1158 additions and 1834 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -8,6 +8,6 @@
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

2793
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

17
package.json
View file

@ -1,7 +1,7 @@
{
"name": "chat-bubbles",
"private": true,
"version": "0.1.0",
"version": "0.2.0",
"license": "Apache-2.0",
"scripts": {
"dev": "vite --host",
@ -9,14 +9,17 @@
"preview": "vite preview"
},
"dependencies": {
"framer-motion": "^6.2.8",
"react": "^17.0.2",
"framer-motion": "^9.0.7",
"react": "^18.2.0",
"react-color": "^2.19.3",
"react-dom": "^17.0.2"
"react-dom": "^18.2.0"
},
"devDependencies": {
"@vitejs/plugin-react": "^1.0.7",
"prettier": "^2.5.1",
"vite": "^2.9.6"
"@types/react": "^18.0.27",
"@types/react-color": "^3.0.6",
"@types/react-dom": "^18.0.10",
"@vitejs/plugin-react-swc": "^3.0.0",
"typescript": "^4.9.3",
"vite": "^4.1.0"
}
}

12
src/App.jsx → src/App.tsx
View file

@ -1,10 +1,10 @@
import { useState, useCallback } from 'react'
import { AnimatePresence } from 'framer-motion'
import { useCallback, useState } from 'react'
import './App.css'
import Chat from './chat'
import Bubble from './bubble'
import BubbleInput from './bubble-input'
import Chat from './chat'
import useMessages from './use-messages'
import { motion, AnimatePresence } from 'framer-motion'
import { SketchPicker } from 'react-color'
import React from 'react'
@ -15,7 +15,7 @@ function App() {
const [strokeColour, setStrokeColour] = useState('#000')
const handleSubmit = useCallback(
bubbleHeight => {
(bubbleHeight: number) => {
if (newMessage.length > 0) {
addMessage({
id: +new Date(),
@ -28,12 +28,12 @@ function App() {
[newMessage, messages]
)
const handleFillColourChange = (color) => {
const handleFillColourChange = (color: { hex: string }) => {
setFillColour(color.hex);
console.log(color);
};
const handleStrokeColourChange = (color) => {
const handleStrokeColourChange = (color: { hex: string }) => {
setStrokeColour(color.hex);
console.log(color);
};

2
src/bubble-input.css
View file

@ -15,7 +15,7 @@
}
.bubble.input > div {
background-color: #eee;
background-color: var(--bubble-background-color);
font-size: 32px;
min-width: 30px;
}

28
src/bubble-input.jsx → src/bubble-input.tsx
View file

@ -1,14 +1,30 @@
import React, { useCallback, useState, useRef, useEffect } from 'react'
import {
KeyboardEventHandler,
useCallback,
useEffect,
useRef,
useState
} from 'react'
import './bubble-input.css'
const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }) => {
const refEditable = useRef()
const refContainer = useRef()
interface BubbleInputProps {
onChange: (value: string) => void
onSubmit: (height: number) => void
value: string
fillColour: string
strokeColour: string
}
const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }: BubbleInputProps) => {
const refEditable = useRef<HTMLDivElement>(null)
const refContainer = useRef<HTMLDivElement>(null)
const [submitted, setSubmitted] = useState(false)
const handleKeyDown = e => {
const handleKeyDown: KeyboardEventHandler = e => {
const { current: elContainer } = refContainer
const { current: elEditable } = refEditable
if (elContainer === null || elEditable === null) return
const { isComposing } = e.nativeEvent
if (e.key === 'Enter' && !isComposing) {
const height = elContainer.clientHeight
@ -46,7 +62,7 @@ const BubbleInput = ({ onChange, onSubmit, value, fillColour, strokeColour }) =>
spellCheck="false"
onBlur={handleBlur}
onKeyDown={handleKeyDown}
onInput={e => onChange(e.target.innerText)}
onInput={e => onChange(e.currentTarget.innerText)}
/>
</div>
)

28
src/bubble.css
View file

@ -1,10 +1,10 @@
.bubble {
width: 100%;
color: var(--bubble-color);
}
.bubble-content {
max-width: 600px;
display: inline-block;
background-color: var(--background-color);
border-radius: 30px;
padding: 12px 20px;
margin-top: 5px;
@ -16,13 +16,14 @@
.bubble-content {
margin-right: 25%;
position: relative;
overflow-wrap: break-word;
}
.bubble:last-child .bubble-content:before,
.bubble:nth-last-child(2) .bubble-content:before {
content: '';
position: absolute;
z-index: 50;
z-index: 0;
bottom: 0;
left: -12px;
height: 26px;
@ -33,18 +34,13 @@
.bubble:last-child .bubble-content:after,
.bubble:nth-last-child(2) .bubble-content:after {
content: '';
position: absolute;
z-index: 100;
bottom: 0;
left: -15px;
width: 15px;
height: 27px;
background: #00a000;
background: #00a000!important;
border-bottom-right-radius: 15px;
bottom: 0;
content: "";
height: 27px;
left: -15px;
position: absolute;
width: 15px;
z-index: 1;
}
.bubble:last-child:before,
.bubble:nth-last-child(2):before {
z-index: 75;
}

19
src/bubble.jsx → src/bubble.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'
import { motion, usePresence } from 'framer-motion'
import React from 'react'
import './bubble.css'
const transition = {
@ -11,15 +11,20 @@ const transition = {
}
}
const Bubble = ({ id, children, sender, dy, fillColour, strokeColour }) => {
interface BubbleProps {
id: number
dy: number
children: React.ReactNode
fillColour: string
strokeColour: string
}
const Bubble = ({ id, children, dy, fillColour, strokeColour }: BubbleProps) => {
const [isPresent, safeToRemove] = usePresence()
const animations = {
layout: true,
initial: 'out',
style: {
position: 'static'
},
animate: 'in',
variants: {
in: { opacity: 1, translateY: 0 },
@ -32,7 +37,9 @@ const Bubble = ({ id, children, sender, dy, fillColour, strokeColour }) => {
return (
<motion.div key={id} className="bubble" {...animations}>
<div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div>
<div style={{ position: 'static' }}>
<div className="bubble-content" style={{backgroundColor: fillColour, color: strokeColour}}>{children}</div>
</div>
</motion.div>
)
}

4
src/chat.jsx → src/chat.tsx
View file

@ -1,7 +1,7 @@
import React from 'react'
import { ReactNode } from 'react'
import './chat.css'
const Chat = ({ children }) => {
const Chat = ({ children }: { children: ReactNode }) => {
return <div className="chat">{children}</div>
}

16
src/index.css
View file

@ -1,8 +1,15 @@
:root{
--bubble-background-color: #eee;
--bubble-color: #000;
--background-color: #00a000
}
html,
body,
#root {
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
}
body {
@ -14,8 +21,3 @@ body {
-moz-osx-font-smoothing: grayscale;
background-color: black;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

11
src/main.jsx
View file

@ -1,11 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)

10
src/main.tsx Normal file
View file

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

14
src/use-messages.js → src/use-messages.ts
View file

@ -1,10 +1,16 @@
import { useState, useCallback } from 'react'
import { useCallback, useState } from 'react'
const useMessages = (initialValue = []) => {
export interface Message {
id: number
text: string
height: number
}
const useMessages = (initialValue: Array<Message> = []) => {
const [messages, setMessages] = useState(initialValue)
const addMessage = useCallback(
msg => {
(msg: Message) => {
setMessages(messages => [...messages, msg])
setTimeout(() => {
setMessages(current => {
@ -17,7 +23,7 @@ const useMessages = (initialValue = []) => {
[setMessages]
)
return [messages, addMessage]
return [messages, addMessage] as const
}
export default useMessages

1
src/vite-env.d.ts vendored Normal file
View file

@ -0,0 +1 @@
/// <reference types="vite/client" />

21
tsconfig.json Normal file
View file

@ -0,0 +1,21 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": false,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

9
tsconfig.node.json Normal file
View file

@ -0,0 +1,9 @@
{
"compilerOptions": {
"composite": true,
"module": "ESNext",
"moduleResolution": "Node",
"allowSyntheticDefaultImports": true
},
"include": ["vite.config.ts"]
}

5
vite.config.js → vite.config.ts
View file

@ -1,7 +1,10 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import react from '@vitejs/plugin-react-swc'
// https://vitejs.dev/config/
export default defineConfig({
server: {
port: 3000
},
plugins: [react()]
})