replace pixiv with social field

Moebits · Aug 28, 2024 · 0aca58a · 0aca58a
1 parent 5849eff
commit 0aca58a
Show file tree

Hide file tree

Showing 24 changed files with 230 additions and 62 deletions.
diff --git a/App.tsx b/App.tsx
@@ -75,7 +75,6 @@ const App: React.FunctionComponent = (props) => {
 
     const getSessionCookie = async () => {
         const cookie = await axios.get("/api/user/session", {withCredentials: true}).then((r) => r.data)
-        console.log(cookie)
         functions.updateCSRFToken(cookie)
         setSession(cookie)
     }

diff --git a/Context.tsx b/Context.tsx
@@ -84,7 +84,7 @@ export const EditTagDescriptionContext = React.createContext<any>(null)
 export const EditTagAliasesContext = React.createContext<any>(null)
 export const EditTagImplicationsContext = React.createContext<any>(null)
 export const EditTagTypeContext = React.createContext<any>(null)
-export const EditTagPixivContext = React.createContext<any>(null)
+export const EditTagSocialContext = React.createContext<any>(null)
 export const EditTagWebsiteContext = React.createContext<any>(null)
 export const EditTagFandomContext = React.createContext<any>(null)
 export const EditTagTwitterContext = React.createContext<any>(null)
@@ -224,7 +224,7 @@ const Context: React.FunctionComponent = (props) => {
     const [editTagAliases, setEditTagAliases] = useState(false)
     const [editTagImplications, setEditTagImplications] = useState(false)
     const [editTagType, setEditTagType] = useState(false)
-    const [editTagPixiv, setEditTagPixiv] = useState(false)
+    const [editTagSocial, setEditTagSocial] = useState(false)
     const [editTagWebsite, setEditTagWebsite] = useState(false)
     const [editTagFandom, setEditTagFandom] = useState(false)
     const [editTagTwitter, setEditTagTwitter] = useState(false)
@@ -356,7 +356,7 @@ return (
         <EditTagFandomContext.Provider value={{editTagFandom, setEditTagFandom}}>
         <EditTagWebsiteContext.Provider value={{editTagWebsite, setEditTagWebsite}}>
         <EditTagTwitterContext.Provider value={{editTagTwitter, setEditTagTwitter}}>
-        <EditTagPixivContext.Provider value={{editTagPixiv, setEditTagPixiv}}>
+        <EditTagSocialContext.Provider value={{editTagSocial, setEditTagSocial}}>
         <EditTagTypeContext.Provider value={{editTagType, setEditTagType}}>
         <QuickEditIDContext.Provider value={{quickEditID, setQuickEditID}}>
         <PostFlagContext.Provider value={{postFlag, setPostFlag}}>
@@ -490,7 +490,7 @@ return (
         </PostFlagContext.Provider>
         </QuickEditIDContext.Provider>
         </EditTagTypeContext.Provider>
-        </EditTagPixivContext.Provider>
+        </EditTagSocialContext.Provider>
         </EditTagTwitterContext.Provider>
         </EditTagWebsiteContext.Provider>
         </EditTagFandomContext.Provider>

diff --git a/assets/icons/bandcamp.png b/assets/icons/bandcamp.png
diff --git a/assets/icons/sketchfab.png b/assets/icons/sketchfab.png
diff --git a/assets/icons/soundcloud.png b/assets/icons/soundcloud.png
diff --git a/assets/icons/youtube.png b/assets/icons/youtube.png
diff --git a/components/ArtistRow.tsx b/components/ArtistRow.tsx
@@ -6,6 +6,8 @@ import functions from "../structures/Functions"
 import Carousel from "./Carousel"
 import website from "../assets/icons/support.png"
 import pixiv from "../assets/icons/pixiv.png"
+import soundcloud from "../assets/icons/soundcloud.png"
+import sketchfab from "../assets/icons/sketchfab.png"
 import twitter from "../assets/icons/twitter.png"
 import "./styles/artistrow.less"
 
@@ -64,8 +66,12 @@ const ArtistRow: React.FunctionComponent<Props> = (props) => {
         if (props.artist.website) {
             jsx.push(<img className="artistrow-social" src={website} onClick={() => window.open(props.artist.website, "_blank")}/>)
         }
-        if (props.artist.pixiv) {
-            jsx.push(<img className="artistrow-social" src={pixiv} onClick={() => window.open(props.artist.pixiv, "_blank")}/>)
+        if (props.artist.social?.includes("pixiv.net")) {
+            jsx.push(<img className="artistrow-social" src={pixiv} onClick={() => window.open(props.artist.social, "_blank")}/>)
+        } else if (props.artist.social?.includes("soundcloud.com")) {
+            jsx.push(<img className="artistrow-social" src={soundcloud} onClick={() => window.open(props.artist.social, "_blank")}/>)
+        } else if (props.artist.social?.includes("sketchfab.com")) {
+            jsx.push(<img className="artistrow-social" src={sketchfab} onClick={() => window.open(props.artist.social, "_blank")}/>)
         }
         if (props.artist.twitter) {
             jsx.push(<img className="artistrow-social" src={twitter} onClick={() => window.open(props.artist.twitter, "_blank")}/>)

diff --git a/components/GridModel.tsx b/components/GridModel.tsx
@@ -3,7 +3,8 @@ import {useHistory} from "react-router-dom"
 import loading from "../assets/icons/loading.gif"
 import {ThemeContext, SizeTypeContext, BrightnessContext, ContrastContext, HueContext, SaturationContext, LightnessContext, MobileContext, ScrollYContext,
 BlurContext, SharpenContext, SquareContext, PixelateContext, DownloadFlagContext, DownloadIDsContext, SpeedContext, ReverseContext, ScrollContext,
-SelectionModeContext, SelectionItemsContext, SelectionPostsContext, ActiveDropdownContext} from "../Context"
+ToolTipXContext, ToolTipYContext, ToolTipEnabledContext, ToolTipPostContext, ToolTipImgContext, SelectionModeContext, SelectionItemsContext, 
+SelectionPostsContext, ActiveDropdownContext} from "../Context"
 import {HashLink as Link} from "react-router-hash-link"
 import path from "path"
 import functions from "../structures/Functions"
@@ -13,6 +14,7 @@ import axios from "axios"
 import * as THREE from "three"
 import {OrbitControls, GLTFLoader, OBJLoader, FBXLoader} from "three-stdlib"
 
+let tooltipTimer = null as any
 let imageTimer = null as any
 let id = null as any
 
@@ -48,6 +50,11 @@ const GridModel = forwardRef<Ref, Props>((props, componentRef) => {
     const {downloadIDs, setDownloadIDs} = useContext(DownloadIDsContext)
     const {scrollY, setScrollY} = useContext(ScrollYContext)
     const {mobile, setMobile} = useContext(MobileContext)
+    const {tooltipX, setToolTipX} = useContext(ToolTipXContext)
+    const {tooltipY, setToolTipY} = useContext(ToolTipYContext)
+    const {tooltipEnabled, setToolTipEnabled} = useContext(ToolTipEnabledContext)
+    const {tooltipPost, setToolTipPost} = useContext(ToolTipPostContext)
+    const {tooltipImg, setToolTipImg} = useContext(ToolTipImgContext)
     const {selectionMode, setSelectionMode} = useContext(SelectionModeContext)
     const {activeDropdown, setActiveDropdown} = useContext(ActiveDropdownContext)
     const {selectionItems, setSelectionItems} = useContext(SelectionItemsContext) as {selectionItems: Set<string>, setSelectionItems: any}
@@ -77,6 +84,7 @@ const GridModel = forwardRef<Ref, Props>((props, componentRef) => {
     const [duration, setDuration] = useState(0)
     const [visible, setVisible] = useState(true)
     const {scroll, setScroll} = useContext(ScrollContext)
+    const [pageBuffering, setPageBuffering] = useState(true)
     const [image, setImage] = useState(null) as any
     const [mixer, setMixer] = useState(null as unknown as THREE.AnimationMixer | null)
     const [animations, setAnimations] = useState(null as unknown as THREE.AnimationClip[] | null)
@@ -287,6 +295,20 @@ const GridModel = forwardRef<Ref, Props>((props, componentRef) => {
         }
     }, [ref])
 
+    const resizeOverlay = () => {
+        if (!rendererRef.current || !pixelateRef.current) return 
+        pixelateRef.current.width = rendererRef.current.clientWidth
+        pixelateRef.current.height = rendererRef.current.clientHeight
+    }
+
+    useEffect(() => {
+        const element = rendererRef.current!
+        new ResizeObserver(resizeOverlay).observe(element)
+        setTimeout(() => {
+            setPageBuffering(false)
+        }, 500)
+    }, [])
+
     const getSquareOffset = () => {
         if (mobile) {
             if (sizeType === "tiny") return 20
@@ -536,6 +558,28 @@ const GridModel = forwardRef<Ref, Props>((props, componentRef) => {
         }
     }
 
+    const mouseEnter = () => {
+        if (pageBuffering) return
+        tooltipTimer = setTimeout(() => {
+            if (!containerRef.current) return
+            const rect = containerRef.current.getBoundingClientRect()
+            const toolTipWidth = 325
+            const toolTipHeight = 150
+            const midpoint = (rect.left + rect.right) / 2
+            setToolTipX(Math.floor(midpoint - (toolTipWidth / 2)))
+            setToolTipY(Math.floor(rect.y - (toolTipHeight / 1.05)))
+            setToolTipPost(props.post)
+            setToolTipImg(props.model)
+            setToolTipEnabled(true)
+        }, 400)
+    }
+
+    const mouseLeave = () => {
+        if (pageBuffering) return
+        if (tooltipTimer) clearTimeout(tooltipTimer)
+        setToolTipEnabled(false)
+    }
+
     const getBorder = () => {
         if (sizeType === "tiny" || sizeType === "small") {
             if (selected) {

diff --git a/components/GridSong.tsx b/components/GridSong.tsx
@@ -3,7 +3,8 @@ import {useHistory} from "react-router-dom"
 import loading from "../assets/icons/loading.gif"
 import {ThemeContext, SizeTypeContext, BrightnessContext, ContrastContext, HueContext, SaturationContext, LightnessContext, MobileContext, ScrollYContext,
 BlurContext, SharpenContext, SquareContext, PixelateContext, DownloadFlagContext, DownloadIDsContext, SpeedContext, ReverseContext, ScrollContext, SiteHueContext,
-SiteLightnessContext, SiteSaturationContext, SelectionModeContext, SelectionItemsContext, SelectionPostsContext, ActiveDropdownContext} from "../Context"
+ToolTipXContext, ToolTipYContext, ToolTipEnabledContext, ToolTipPostContext, ToolTipImgContext, SiteLightnessContext, SiteSaturationContext, SelectionModeContext, 
+SelectionItemsContext, SelectionPostsContext, ActiveDropdownContext} from "../Context"
 import {HashLink as Link} from "react-router-hash-link"
 import path from "path"
 import functions from "../structures/Functions"
@@ -12,6 +13,8 @@ import "./styles/gridimage.less"
 import musicNote from "../assets/icons/music-note.png"
 import axios from "axios"
 
+let tooltipTimer = null as any
+
 interface Props {
     id: number
     audio: string
@@ -46,6 +49,11 @@ const GridSong = forwardRef<Ref, Props>((props, componentRef) => {
     const {downloadIDs, setDownloadIDs} = useContext(DownloadIDsContext)
     const {scrollY, setScrollY} = useContext(ScrollYContext)
     const {mobile, setMobile} = useContext(MobileContext)
+    const {tooltipX, setToolTipX} = useContext(ToolTipXContext)
+    const {tooltipY, setToolTipY} = useContext(ToolTipYContext)
+    const {tooltipEnabled, setToolTipEnabled} = useContext(ToolTipEnabledContext)
+    const {tooltipPost, setToolTipPost} = useContext(ToolTipPostContext)
+    const {tooltipImg, setToolTipImg} = useContext(ToolTipImgContext)
     const {selectionMode, setSelectionMode} = useContext(SelectionModeContext)
     const {activeDropdown, setActiveDropdown} = useContext(ActiveDropdownContext)
     const {selectionItems, setSelectionItems} = useContext(SelectionItemsContext) as {selectionItems: Set<string>, setSelectionItems: any}
@@ -62,6 +70,7 @@ const GridSong = forwardRef<Ref, Props>((props, componentRef) => {
     const [naturalWidth, setNaturalWidth] = useState(0)
     const [naturalHeight, setNaturalHeight] = useState(0)
     const [imageLoaded, setImageLoaded] = useState(false)
+    const [pageBuffering, setPageBuffering] = useState(true)
     const [drag, setDrag] = useState(false)
     const {speed, setSpeed} = useContext(SpeedContext)
     const {reverse, setReverse} = useContext(ReverseContext)
@@ -151,6 +160,14 @@ const GridSong = forwardRef<Ref, Props>((props, componentRef) => {
         new ResizeObserver(resizeOverlay).observe(element)
     }, [])
 
+    useEffect(() => {
+        const element = ref.current!
+        new ResizeObserver(resizeOverlay).observe(element)
+        setTimeout(() => {
+            setPageBuffering(false)
+        }, 500)
+    }, [])
+
     const getSquareOffset = () => {
         if (mobile) {
             if (sizeType === "tiny") return 20
@@ -463,6 +480,28 @@ const GridSong = forwardRef<Ref, Props>((props, componentRef) => {
         }
     }
 
+    const mouseEnter = () => {
+        if (pageBuffering) return
+        tooltipTimer = setTimeout(() => {
+            if (!containerRef.current) return
+            const rect = containerRef.current.getBoundingClientRect()
+            const toolTipWidth = 325
+            const toolTipHeight = 150
+            const midpoint = (rect.left + rect.right) / 2
+            setToolTipX(Math.floor(midpoint - (toolTipWidth / 2)))
+            setToolTipY(Math.floor(rect.y - (toolTipHeight / 1.05)))
+            setToolTipPost(props.post)
+            setToolTipImg(props.audio)
+            setToolTipEnabled(true)
+        }, 400)
+    }
+
+    const mouseLeave = () => {
+        if (pageBuffering) return
+        if (tooltipTimer) clearTimeout(tooltipTimer)
+        setToolTipEnabled(false)
+    }
+
     const getBorder = () => {
         if (sizeType === "tiny" || sizeType === "small") {
             if (selected) {
@@ -521,7 +560,8 @@ const GridSong = forwardRef<Ref, Props>((props, componentRef) => {
 
 
     return (
-        <div style={{opacity: visible ? "1" : "0", transition: "opacity 0.1s"}} className="image-box" id={String(props.id)} ref={containerRef} onClick={onClick} onAuxClick={onClick} onMouseDown={mouseDown} onMouseUp={mouseUp} onMouseMove={mouseMove}>
+        <div style={{opacity: visible ? "1" : "0", transition: "opacity 0.1s"}} className="image-box" id={String(props.id)} ref={containerRef} onClick={onClick} 
+        onAuxClick={onClick} onMouseDown={mouseDown} onMouseUp={mouseUp} onMouseMove={mouseMove} onMouseEnter={mouseEnter} onMouseLeave={mouseLeave}>
             <div className="image-filters" ref={imageFiltersRef} onMouseMove={(event) => imageAnimation(event)} onMouseLeave={() => cancelImageAnimation()}>
                 <img className="song-icon" src={musicNote} style={{filter: getFilter()}} ref={songIconRef}/>
                 <canvas draggable={false} className="lightness-overlay" ref={lightnessRef}></canvas>

diff --git a/components/MobileInfo.tsx b/components/MobileInfo.tsx
@@ -26,6 +26,10 @@ import pixiv from "../assets/icons/pixiv.png"
 import twitter from "../assets/icons/twitter.png"
 import deviantart from "../assets/icons/deviantart.png"
 import artstation from "../assets/icons/artstation.png"
+import soundcloud from "../assets/icons/soundcloud.png"
+import youtube from "../assets/icons/youtube.png"
+import bandcamp from "../assets/icons/bandcamp.png"
+import sketchfab from "../assets/icons/sketchfab.png"
 import fandom from "../assets/icons/fandom.png"
 import danbooru from "../assets/icons/danbooru.png"
 import gelbooru from "../assets/icons/gelbooru.png"
@@ -124,8 +128,12 @@ const MobileInfo: React.FunctionComponent<Props> = (props) => {
                 if (props.artists[i].website) {
                     jsx.push(<img className="mobileinfo-social" src={website} onClick={() => window.open(props.artists[i].website, "_blank")}/>)
                 }
-                if (props.artists[i].pixiv) {
-                    jsx.push(<img className="mobileinfo-social" src={pixiv} onClick={() => window.open(props.artists[i].pixiv, "_blank")}/>)
+                if (props.artists[i].social?.includes("pixiv.net")) {
+                    jsx.push(<img className="sidebar-social" src={pixiv} onClick={() => window.open(props.artists[i].social, "_blank")}/>)
+                } else if (props.artists[i].social?.includes("soundcloud.com")) {
+                    jsx.push(<img className="sidebar-social" src={soundcloud} onClick={() => window.open(props.artists[i].social, "_blank")}/>)
+                } else if (props.artists[i].social?.includes("sketchfab.com")) {
+                    jsx.push(<img className="sidebar-social" src={sketchfab} onClick={() => window.open(props.artists[i].social, "_blank")}/>)
                 }
                 if (props.artists[i].twitter) {
                     jsx.push(<img className="mobileinfo-social" src={twitter} onClick={() => window.open(props.artists[i].twitter, "_blank")}/>)
@@ -320,6 +328,12 @@ const MobileInfo: React.FunctionComponent<Props> = (props) => {
             if (props.post.mirrors.pixiv) {
                 jsx.push(<img className="sidebar-social" src={pixiv} onClick={() => window.open(props.post.mirrors.pixiv, "_blank")}/>)
             }
+            if (props.post.mirrors.soundcloud) {
+                jsx.push(<img className="sidebar-social" src={soundcloud} onClick={() => window.open(props.post.mirrors.soundcloud, "_blank")}/>)
+            }
+            if (props.post.mirrors.sketchfab) {
+                jsx.push(<img className="sidebar-social" src={sketchfab} onClick={() => window.open(props.post.mirrors.sketchfab, "_blank")}/>)
+            }
             if (props.post.mirrors.twitter) {
                 jsx.push(<img className="sidebar-social" src={twitter} onClick={() => window.open(props.post.mirrors.twitter, "_blank")}/>)
             }
@@ -344,6 +358,12 @@ const MobileInfo: React.FunctionComponent<Props> = (props) => {
             if (props.post.mirrors.konachan) {
                 jsx.push(<img className="sidebar-social" src={konachan} onClick={() => window.open(props.post.mirrors.konachan, "_blank")}/>)
             }
+            if (props.post.mirrors.youtube) {
+                jsx.push(<img className="sidebar-social" src={youtube} onClick={() => window.open(props.post.mirrors.youtube, "_blank")}/>)
+            }
+            if (props.post.mirrors.bandcamp) {
+                jsx.push(<img className="sidebar-social" src={bandcamp} onClick={() => window.open(props.post.mirrors.bandcamp, "_blank")}/>)
+            }
         }
         if (jsx.length) {
             return (