\n \n
\n \n )\n}\n\nexport default ContentPreview\n","import React, { useRef, useEffect } from 'react'\nimport throttle from 'lodash.throttle'\nimport Flickity from 'react-flickity-component'\n\nimport 'flickity/css/flickity.css'\nimport './Carousel.css'\n\nconst defaultOptions = {\n freeScroll: true,\n groupCells: true,\n imagesLoaded: true,\n pageDots: false,\n contain: true,\n cellAlign: 'left',\n selectedAttraction: 0.2,\n friction: 0.8\n}\n\nconst Carousel = ({ className = null, options = defaultOptions, children }) => {\n const flickity = useRef(null)\n\n useEffect(() => {\n flickity.current.on('dragStart', onDragStart)\n flickity.current.on('dragEnd', onDragEnd)\n return () => {\n flickity.current.off('dragStart', onDragStart)\n flickity.current.off('dragEnd', onDragEnd)\n }\n }, [])\n\n const onDragStart = () =>\n flickity.current.slider.childNodes.forEach(\n slide => (slide.style.pointerEvents = 'none')\n )\n const onDragEnd = () =>\n flickity.current.slider.childNodes.forEach(\n slide => (slide.style.pointerEvents = 'all')\n )\n\n const onWheel = throttle((e: any) => {\n if (e.deltaX > 0) {\n flickity.current?.next()\n } else if (e.deltaX < 0) {\n flickity.current?.previous()\n }\n }, 250)\n\n return (\n \n
\n )}\n \n {content.medium === 'book'\n ? title.split(':')[0].split('(')[0]\n : content.medium === 'film' || content.medium === 'tv'\n ? title.split('(')[0]\n : title}\n
\n {creatorList && creatorList.length > 0 && (\n\n {creatorList.map(creator => creator.name).join(', ')}\n
\n )}\n\n (flickity.current = c)}\n className={className}\n options={options}\n >\n {children}\n \n
\n )\n}\n\nexport default Carousel\n","/* eslint-disable react/no-danger */\nimport React, { useState } from 'react'\nimport LinkWrapper from 'app/mainframe/components/LinkWrapper'\n\nimport { useAppConfig } from 'app/mainframe/context/appConfig'\nimport { useIsOverflow } from 'app/mainframe/hooks/useIsOverflow'\n\nimport ContentPreviewBox from 'app/mainframe/components/Content/ContentPreviewBox/ContentPreviewBox'\nimport LogButton from 'app/mainframe/components/Log/Buttons/LogButton'\nimport SaveButton from 'app/mainframe/components/Log/Buttons/SaveButton'\nimport Button from 'app/mainframe/components/Button/Button'\nimport clsx from 'clsx'\nimport { useLogCarouselContext } from 'app/mainframe/context/logCarousel'\n\nconst ContentHeader = ({ content, className = null }) => {\n const { embed } = useAppConfig()\n const [overflowRef, isOverflow] = useIsOverflow()\n const { isResized, setIsResized } = useLogCarouselContext()\n const [showOverflow, setShowOverflow] = useState(false)\n const { title, formSlug, slug, creatorList, medium, description } = content\n\n const toggleDescription = () => {\n setShowOverflow(!showOverflow)\n setIsResized(!isResized)\n }\n\n const contentBody = `${description ? `${description}` : ''}`\n\n return (\n
\n
\n\n \n \n {medium === 'book' ? title.split(':')[0].split('(')[0] : title}\n \n {creatorList && creatorList.length > 0 && (\n <>\n {creatorList.map((creator, index) => (\n \n {`${creator.name}${creatorList.length - index > 1 ? ', ' : ''}`}\n \n ))}\n \n )}\n\n \n
\n \n )\n}\n\nexport default ContentHeader\n","import React, { Fragment } from 'react'\nimport clsx from 'clsx'\nimport NiceModal from '@ebay/nice-modal-react'\nimport InfiniteScroll from 'react-infinite-scroller'\n\nimport ContentPreview from 'app/mainframe/components/Content/ContentPreview/ContentPreview'\nimport PrimerPreview from 'app/mainframe/components/Primer/PrimerPreview/PrimerPreview'\nimport LogPreview from 'app/mainframe/components/Log/LogPreview/LogPreview'\n\nimport { useAppConfig } from 'app/mainframe/context/appConfig'\n\nimport { AiOutlineLoading } from 'react-icons/ai'\n\nconst InfiniteGrid = ({\n query,\n type,\n content,\n gridClassName,\n isCarousel = false,\n setCollectiveContent = null,\n collectiveLogs = null\n}: {\n query: any\n type: 'content' | 'primer' | 'log'\n content?: any\n gridClassName?: string\n isCarousel?: boolean\n setCollectiveContent?: any // resets query in collective logs\n collectiveLogs?: any\n}) => {\n const { data, error, isError, fetchNextPage, hasNextPage } = query\n const { embed } = useAppConfig()\n\n const onContentClick = key => e => {\n e.preventDefault()\n const dataFlattened = [].concat.apply([], data.pages)\n NiceModal.show('log-carousel-modal', {\n logs: dataFlattened,\n center: key\n })\n }\n\n const onCollectiveContentClick = content => e => {\n e.preventDefault()\n setCollectiveContent(content)\n NiceModal.show('log-carousel-modal', {\n logs: collectiveLogs,\n content\n })\n }\n\n if (isError) {\n return Error: {error}\n }\n\n return (\n \n {embed ? (\n \n \n \n ) : (\n <>\n
\n {(description) && (\n \n Read more\n
\n )}\n \n )}\n \n
\n \n\n {log.user.name}
\n\n @{log.user.username}\n
\n\n
\n \n )\n}\n\nexport default LogHeader\n","import React, { useState } from 'react'\nimport clsx from 'clsx'\n\nimport { useAuth } from 'app/mainframe/context/auth'\nimport { useLikeLog } from 'app/mainframe/queries/log'\n\nimport { FaBookmark, FaRegBookmark } from 'react-icons/fa'\n\nconst LikeButton = ({ log, className = null }) => {\n const { currentUser } = useAuth()\n const [liked, setLiked] = useState(!!log.like)\n const [likesCount, setLikesCount] = useState(log.likesCount)\n\n const { mutate, isLoading } = useLikeLog(log.id)\n\n const handleClick = e => {\n e.preventDefault()\n setLiked(!liked)\n setLikesCount(liked ? likesCount - 1 : likesCount + 1)\n mutate(liked)\n }\n\n if (log && currentUser) {\n return (\n \n \n
\n \n
\n )}\n \n
\n )\n}\n\nexport default LogFooter\n","import React from 'react'\n\nimport { useAppConfig } from 'app/mainframe/context/appConfig'\nimport { useAuth } from 'app/mainframe/context/auth'\n\nimport ContentHeader from 'app/mainframe/components/Content/ContentHeader'\nimport Editor from 'app/mainframe/components/Editor/Editor'\n\nimport clsx from 'clsx'\nimport EmptyNote from './EmptyNote'\nimport LogHeader from './LogHeader'\nimport LogFooter from './LogFooter'\n\nconst LogNote = ({\n log,\n content,\n onCancel = null,\n editable = false,\n hideContent = false\n}: {\n log: any\n content: any\n onCancel?: any\n editable?: boolean\n hideContent?: boolean\n}) => {\n const { currentUser } = useAuth()\n const { embed } = useAppConfig()\n\n const isOwner = currentUser && currentUser.username === log.user.username\n\n return (\n <>\n {content && !hideContent && (\n \n
\n \n
\n {!embed && \n
\n \n {text}\n
\n\n
\n \n )\n}\n\nexport default VideoModal\n","import React, { useState } from 'react'\nimport { RiPlayCircleFill, RiPauseCircleFill } from 'react-icons/ri'\nimport clsx from 'clsx'\nimport { usePlayer } from 'app/mainframe/context/player'\nimport VideoModal from 'app/mainframe/components/Content/ContentPlayButton/VideoModal'\n\nconst ContentPlayButton = ({ content }) => {\n const { playing, current, player, controls } = usePlayer()\n const [videoVisible, setVideoVisible] = useState(false)\n\n const isCurrentlyPlaying = playing && current && current.id === content.id\n\n return (\n <>\n \n
\n \n )\n}\n\nexport default ContentImage\n","import { useEffect } from 'react'\nimport { toast } from 'react-toastify'\n\nconst ErrorMessage = ({ error }) => {\n useEffect(() => {\n toast.error(error.message)\n }, [error])\n\n return null\n}\n\nexport default ErrorMessage\n","import React, {\n createContext,\n useContext,\n useReducer,\n useEffect,\n useState\n} from 'react'\nimport api from 'app/mainframe/api'\nimport logger from 'use-reducer-logger'\n\nimport { useModal } from '@ebay/nice-modal-react'\n\nimport OracleButton from 'app/mainframe/components/OracleButton'\n\nimport { toast } from 'react-toastify'\nimport { AiOutlineLoading } from 'react-icons/ai'\n\nconst localStorageKey = 'jwt_auth_token'\n\nconst initialState = {\n currentUser: null,\n isLoading: false,\n error: null\n}\n\nconst authReducer = (state, action) => {\n switch (action.type) {\n case 'AUTH':\n return {\n ...state,\n isLoading: true\n }\n case 'AUTH_SUCCESS':\n return {\n ...initialState,\n currentUser: action.response.user\n }\n case 'AUTH_ERROR':\n return {\n ...initialState,\n error: action.response\n }\n case 'LOGOUT':\n return initialState\n default:\n throw new Error(`Unhandled action type: ${action.type}`)\n }\n}\n\nconst AuthStateContext = createContext(null)\n\nconst AuthProvider = ({ children }: { children: React.ReactNode }) => {\n const [state, dispatch] = useReducer(\n process.env.NODE_ENV === 'development' ? logger(authReducer) : authReducer,\n initialState\n )\n const [appLoading, setAppLoading] = useState(true)\n const [oracleLink, setOracleLink] = useState(null)\n\n const signupModal = useModal('signup-modal')\n\n useEffect(() => {\n loadUser()\n }, [])\n\n const loadUser = () => {\n try {\n const authToken = localStorage?.getItem(localStorageKey)\n if (authToken) {\n api.setAccessToken(authToken)\n api.Auth.user().then(\n response => {\n dispatch({ type: 'AUTH_SUCCESS', response })\n setAppLoading(false)\n },\n () => {\n logout()\n setAppLoading(false)\n }\n )\n } else {\n setAppLoading(false)\n }\n } catch (error) {\n setAppLoading(false)\n }\n }\n\n const signup = ({ email, username, name, password }) => {\n dispatch({ type: 'AUTH' })\n api.Auth.signup({ email, username, name, password }).then(\n response => {\n window.location.href = '/welcome'\n localStorage?.setItem(localStorageKey, response.user.token)\n api.setAccessToken(response.user.token)\n dispatch({ type: 'AUTH_SUCCESS', response })\n signupModal.hide()\n },\n error => {\n dispatch({ type: 'AUTH_ERROR', response: error })\n }\n )\n }\n\n const login = ({ email, password }) => {\n dispatch({ type: 'AUTH' })\n api.Auth.login({ email, password }).then(\n response => {\n localStorage?.setItem(localStorageKey, response.user.token)\n api.setAccessToken(response.user.token)\n dispatch({ type: 'AUTH_SUCCESS', response })\n },\n error => {\n dispatch({ type: 'AUTH_ERROR', response: error })\n }\n )\n }\n\n const logout = () => {\n localStorage?.removeItem(localStorageKey)\n api.setAccessToken(null)\n dispatch({ type: 'LOGOUT' })\n }\n\n const update = user => {\n dispatch({ type: 'AUTH' })\n api.Auth.update(user).then(\n response => {\n dispatch({ type: 'AUTH_SUCCESS', response })\n toast.success('Profile updated')\n },\n error => {\n dispatch({ type: 'AUTH_ERROR', response: error })\n }\n )\n }\n\n const updatePassword = ({ password, token }) => {\n api.Password.update({ password, token }).then(\n response => {\n dispatch({ type: 'AUTH_SUCCESS', response })\n toast.success('Password updated')\n },\n error => {\n dispatch({ type: 'AUTH_ERROR', response: error })\n }\n )\n }\n\n const forgotPassword = ({ email }) => api.Password.forgot(email)\n const checkToken = token => api.Password.token(token)\n\n const onboard = () => {\n api.User.onboard().then(\n response => {\n dispatch({ type: 'AUTH_SUCCESS', response })\n },\n error => {\n dispatch({ type: 'AUTH_ERROR', response: error })\n }\n )\n }\n\n const handleSetOracleLink = link => {\n if (state.currentUser && state.currentUser.type === 'oracle') {\n setOracleLink(link)\n }\n }\n\n if (appLoading) {\n return (\n \n
\n )}\n \n {content.origin}\n
\n\n
\n )\n }\n\n return (\n \n \n\n {createPlaceholders()}\n\n {primer.contentCollection &&\n primer.contentCollection\n .slice(\n primer.contentCollection.length >= 4 ? 1 : 0,\n primer.contentCollection.length >= 4 ? 4 : 3\n )\n .map(content => (\n
\n )}\n {primer.title}
\n {primer.users && primer.users.length > 1 ? (\n\n
\n )}\n \n {primer.users[0].displayName}\n
\n\n
\n {primer.bodyText}\n
\n )}\n \n )\n}\n\nexport default PrimerPreview\n","import React, { useState, useRef, useLayoutEffect } from 'react'\n\nexport const useIsOverflow = () => {\n const overflowRef = useRef()\n const [isOverflow, setIsOverflow] = useState(undefined)\n\n useLayoutEffect(() => {\n const { current } = overflowRef as any\n\n const trigger = () => {\n const hasOverflow = current?.scrollHeight > current?.clientHeight\n setIsOverflow(hasOverflow)\n }\n\n if (current) {\n trigger()\n }\n })\n\n return [overflowRef, isOverflow]\n}\n","import React from 'react'\nimport NumericLabel from 'react-pretty-numbers'\nimport Pluralize from 'react-pluralize'\n\ninterface NumberProps {\n count: number\n noun?: string\n className?: string\n}\nconst Number = ({ count, noun, className }: NumberProps) => {\n let precision\n if (count > 9999) {\n precision = 1\n } else if (count > 999 && count < 10000) {\n precision = 2\n } else {\n precision = 0\n }\n\n return (\n \n \n 0)}\n className='mr-1 hover:bg-transparent border border-transparent outline-none focus:outline-none shadow-none focus:shadow-none ring-0 focus:ring-0'\n defaultValue={editorLink}\n placeholder='Enter link URL...'\n onChange={e => {\n setLink(e.target.value)\n }}\n onPressEnter={e => {\n e.preventDefault()\n editor.chain().focus().setLink({ href: link }).run()\n }}\n />\n \n editor.chain().focus().unsetLink().run()}\n className='flex-shrink-0 mr-1 hover:text-gold-500 text-gray-200 text-base leading-none cursor-pointer'\n />\n
\n )\n}\n\nexport default BubbleMenu\n","import React from 'react'\nimport { Link } from 'react-router-dom'\nimport clsx from 'clsx'\nimport Pluralize from 'react-pluralize'\n\nimport ContentPreview from 'app/mainframe/components/Content/ContentPreview/ContentPreview'\nimport Image from 'app/mainframe/components/Image'\nimport TimeAgo from 'app/mainframe/components/TimeAgo'\n\nimport { FiLayers } from 'react-icons/fi'\n\nimport './LogPreview.css'\n\nconst LogPreview = ({\n log,\n content,\n className,\n onClick = null,\n showContent = false\n}: {\n log?: any\n content?: any\n className?: string\n onClick?: any\n showContent?: boolean\n}) => {\n const handleClick = e => {\n if (onClick) {\n e.preventDefault()\n onClick()\n }\n }\n return (\n \n
\n )}\n {log.user.displayName}
\n \n\n\n {log.noteText}\n
\n\n \n {log.primers && log.primers.length > 0 && (\n
\n \n )\n}\n\nexport default LogPreview\n","import algoliasearch from 'algoliasearch/lite'\nimport recommend from '@algolia/recommend'\n\nconst recommendClient = recommend(\n process.env.ALGOLIASEARCH_APPLICATION_ID,\n process.env.ALGOLIASEARCH_API_KEY\n)\n\nconst searchClient = algoliasearch(\n process.env.ALGOLIASEARCH_APPLICATION_ID,\n process.env.ALGOLIASEARCH_API_KEY\n)\n\nexport { searchClient, recommendClient }\n","import React, { useState, useEffect } from 'react'\nimport { createPortal } from 'react-dom'\n\nconst AuthWindow = ({\n url = '',\n name = '',\n title = '',\n features = { width: 640, height: 600 } as any,\n onBlock = null,\n onOpen = null,\n onUnload = null,\n center = 'parent',\n children = null\n}) => {\n const container = document.createElement('div')\n let _window = null\n let windowCheckerInterval = null\n let released = false\n\n const [mounted, setMounted] = useState(false)\n\n useEffect(() => {\n openChild()\n setMounted(true)\n return () => {\n if (_window) _window.close()\n }\n }, [])\n\n /**\n * Create the new window when component mounts\n */\n const openChild = () => {\n // Prepare position of the new window to be centered against the 'parent' window or 'screen'.\n if (features.width === undefined || features.height === undefined) {\n console.warn(\n 'width and height window features must be present when a center prop is provided'\n )\n } else if (center === 'parent') {\n features.left =\n window.top.outerWidth / 2 + window.top.screenX - features.width / 2\n features.top =\n window.top.outerHeight / 2 + window.top.screenY - features.height / 2\n } else if (center === 'screen') {\n const windowScreen = window.screen as any\n const screenLeft =\n window.screenLeft !== undefined ? window.screenLeft : windowScreen.left\n const screenTop =\n window.screenTop !== undefined ? window.screenTop : windowScreen.top\n\n const width = window.innerWidth\n ? window.innerWidth\n : document.documentElement.clientWidth\n ? document.documentElement.clientWidth\n : window.screen.width\n const height = window.innerHeight\n ? window.innerHeight\n : document.documentElement.clientHeight\n ? document.documentElement.clientHeight\n : window.screen.height\n\n features.left = width / 2 - features.width / 2 + screenLeft\n features.top = height / 2 - features.height / 2 + screenTop\n }\n\n // Open a new window.\n _window = window.open(url, name, toWindowFeatures(features))\n\n // When a new window use content from a cross-origin there's no way we can attach event\n // to it. Therefore, we need to detect in a interval when the new window was destroyed\n // or was closed.\n windowCheckerInterval = setInterval(() => {\n if (!_window || _window.closed) release()\n }, 50)\n\n // Check if the new window was succesfully opened.\n if (_window) {\n _window.document.title = title\n _window.document.body.appendChild(container)\n\n if (typeof onOpen === 'function') {\n onOpen(_window)\n }\n\n // Release anything bound to this component before the new window unload.\n _window.addEventListener('ononload', () => release())\n } else {\n // Handle error on opening of new window.\n if (typeof onBlock === 'function') {\n onBlock(null)\n } else {\n console.warn('A new window could not be opened. Maybe it was blocked.')\n }\n }\n }\n\n const release = () => {\n // This method can only be called once.\n if (released) {\n return\n }\n released = true\n\n // Remove checker interval.\n clearInterval(windowCheckerInterval)\n\n // Call any function bound to the `onUnload` prop.\n if (typeof onUnload === 'function') {\n onUnload(null)\n }\n }\n\n if (mounted) return createPortal(children, container)\n return null\n}\n\nexport default AuthWindow\n\n/**\n * Convert features props to window features format (name=value,other=value).\n * @param {Object} obj\n * @return {String}\n * @private\n */\nfunction toWindowFeatures(obj) {\n return Object.keys(obj)\n .reduce((features, name) => {\n const value = obj[name]\n if (typeof value === 'boolean') {\n features.push(`${name}=${value ? 'yes' : 'no'}`)\n } else {\n features.push(`${name}=${value}`)\n }\n return features\n }, [])\n .join(',')\n}\n","import React, { useState } from 'react'\nimport clsx from 'clsx'\n\nimport { useModal } from '@ebay/nice-modal-react'\nimport { useAuth } from 'app/mainframe/context/auth'\n\nimport Button from 'app/mainframe/components/Button/Button'\nimport AuthWindow from 'app/mainframe/components/Auth/AuthWindow'\n\nimport { AiFillApple } from 'react-icons/ai'\n\nconst SocialAuth = ({\n text,\n provider,\n className = ''\n}: {\n text?: string\n provider: 'google' | 'apple'\n className?: string\n}) => {\n const { loadUser } = useAuth()\n const [popupVisible, setPopupVisible] = useState(false)\n const signupModal = useModal('signup-modal')\n\n const onClick = e => setPopupVisible(true)\n\n const onUnload = () => {\n signupModal.hide()\n loadUser()\n setPopupVisible(false)\n }\n\n return (\n <>\n \n
\n )}\n \n
\n \n
\n )\n}\n\nconst FormFooter = ({ isLoading, error, signup = false }) => {\n return (\n <>\n \n \n
\n\n {error && \n
\n )\n }\n\n return (\n \n \n \n Submit\n \n
\n {error && (\n {error}
\n )}\n \n )\n}\n\nconst SignupForm = () => {\n const { signup, isLoading, error } = useAuth()\n\n return (\n <>\n\n
\n ) : error ? (\n \n
\n Confirmation sent
\n\n Check your email to reset your password.\n
\nForgot password
\n\n \n Return to login\n \n
\n \n )\n}\n\nexport { RequestAccessForm, SignupForm, LoginForm, ForgotPasswordForm }\n","import React, { useCallback, useState } from 'react'\nimport { useDropzone } from 'react-dropzone'\nimport clsx from 'clsx'\nimport { DirectUpload } from 'activestorage'\nimport { toast } from 'react-toastify'\n\nimport { useAuth } from 'app/mainframe/context/auth'\nimport { useEditContent } from 'app/mainframe/queries/content'\n\nimport { RiImageAddLine } from 'react-icons/ri'\n\nconst ContentUpload = ({ className = null, content }) => {\n const { currentUser } = useAuth()\n const { mutateAsync: editContent, isLoading } = useEditContent()\n const [imageLoading, setImageLoading] = useState(false)\n\n const onDrop = useCallback(acceptedFiles => {\n const file = acceptedFiles[0]\n if (file) {\n setImageLoading(true)\n const toasted = toast.loading('Uploading image', {\n autoClose: false\n })\n const upload = new DirectUpload(\n file,\n '/api/rails/active_storage/direct_uploads'\n )\n upload.create((error, blob) => {\n setImageLoading(false)\n if (error) {\n toast.update(toasted, {\n render: 'Error updating',\n type: 'error',\n autoClose: 3333,\n isLoading: false\n })\n } else {\n toast.update(toasted, {\n render: 'Updating content'\n })\n editContent({ image: blob.signed_id, slug: content.slug }).then(\n () => {\n toast.update(toasted, {\n render: 'Success',\n type: 'success',\n autoClose: 3333,\n isLoading: false\n })\n }\n )\n }\n })\n } else {\n toast.error('No image file found')\n }\n }, [])\n\n const onDropRejected = fileRejections => {\n const error =\n fileRejections[0]?.errors[0]?.code === 'file-invalid-type'\n ? 'Only JPG or PNG images allowed'\n : 'Image must be smaller than 15MB'\n toast.error(error)\n }\n\n const { getRootProps, getInputProps } = useDropzone({\n onDrop: onDrop,\n onDropRejected: onDropRejected,\n accept: 'image/jpeg, image/png',\n maxSize: 15728640, // max 15mb\n maxFiles: 1,\n multiple: false,\n disabled: isLoading\n })\n\n const loading = isLoading || imageLoading\n\n if (\n currentUser &&\n (currentUser.type === 'oracle' || currentUser.type === 'curator')\n ) {\n return (\n \n \n \n
\n )}\n \n \n {saved ? (\n
\n \n
\n ) : (\n \n {!isDeleting && !isSaving && (\n
\n )}\n \n \n
\n \n )\n}\n\nexport default Share\n","import React from 'react'\nimport { CopyToClipboard } from 'react-copy-to-clipboard'\n\nimport { toast } from 'react-toastify'\n\nconst CopyLink = ({ to, children, className = '' }) => {\n const handleCopy = e => {\n e.preventDefault()\n toast.success('Link copied')\n }\n\n return (\n \n
\n)\n\nexport default ProfileGroup\n","import React, { useRef, useEffect } from 'react'\nimport clsx from 'clsx'\n\nimport { MdCancel } from 'react-icons/md'\nimport { AiOutlineLoading } from 'react-icons/ai'\n\ninterface TextInputProps {\n className?: string\n prefix?: any\n name?: string\n placeholder?: string\n value?: string\n size?: 'lg' | 'sm' | 'md' | undefined\n required?: boolean\n disabled?: boolean\n loading?: boolean\n autoFocus?: boolean\n onChange?: any\n onBlur?: any\n onFocus?: any\n onKeyDown?: any\n onClear?: any\n}\n\nexport const TextInput = ({\n className,\n prefix,\n name,\n placeholder,\n value,\n size = 'md',\n disabled,\n loading,\n autoFocus = false,\n onChange,\n onBlur,\n onFocus,\n onKeyDown,\n onClear\n}: TextInputProps) => {\n const inputRef = useRef(null)\n\n useEffect(() => {\n if (autoFocus && inputRef.current) {\n inputRef.current.focus()\n }\n }, [])\n\n return (\n \n {users.map(user => (\n
\n \n {prefix && (\n \n {loading ? (\n
\n )}\n \n )\n}\n","import React from 'react'\nimport clsx from 'clsx'\n\nimport {\n useAddPrimerLog,\n useRemovePrimerLog\n} from 'app/mainframe/queries/primer'\n\nimport Image from 'app/mainframe/components/Image'\n\nimport { AiOutlineLoading } from 'react-icons/ai'\nimport { FiCircle, FiCheckCircle } from 'react-icons/fi'\n\nimport { useMixpanel } from 'app/mainframe/context/mixpanel'\n\nconst PrimerListItem = ({ primer, log, content }) => {\n const { mixpanel } = useMixpanel()\n const { mutate: removePrimerLog, isLoading: isLoadingRemove } =\n useRemovePrimerLog(primer.slug)\n const { mutate: addPrimerLog, isLoading: isLoadingAdd } = useAddPrimerLog(\n primer.slug\n )\n\n const onClick = () => {\n if (primer.selected) {\n removePrimerLog({ slug: primer.slug, logId: log.id })\n } else {\n mixpanel.track('Log Collected', {\n id: log.id,\n primer: primer.id,\n content: content.id\n })\n addPrimerLog({\n slug: primer.slug,\n contentId: content.id,\n title: content.title\n })\n }\n }\n const isLoading = isLoadingRemove || isLoadingAdd\n\n return (\n \n {prefix}\n
\n )}\n \n
\n {primer.title}
\n {isLoading ? (\n\n setVisible(false)}\n className='hover:text-gray-100 text-gray-300 text-xs tracking-widest cursor-pointer uppercase'\n >\n Cancel\n
\n \n \n )\n }\n return (\n \n \n \n
\n \n \n return\n
\n \n Create\n
\n \n setVisible(true)}\n className='group flex items-center px-0.5 py-1 w-full hover:text-gold-500 text-gray-300 text-sm tracking-widest rounded-md cursor-pointer select-none uppercase transition'\n >\n
\n \n )\n}\n\nexport default PrimerCreateButton\n","import React, { useState, useEffect } from 'react'\n\nimport { useRemoveLog } from 'app/mainframe/queries/log'\nimport { useUserPrimersList } from 'app/mainframe/queries/user'\n\nimport { FiCheckCircle } from 'react-icons/fi'\nimport {\n AiOutlineSearch,\n AiOutlineLoading,\n AiOutlineDelete\n} from 'react-icons/ai'\n\nimport Popover from 'app/mainframe/components/Popover'\nimport Button from 'app/mainframe/components/Button/Button'\nimport TextInput from 'app/mainframe/components/Input/TextInput'\nimport PrimerListItem from 'app/mainframe/components/Log/PrimerSelect/PrimerListItem'\nimport PrimerCreateButton from 'app/mainframe/components/Log/PrimerSelect/PrimerCreateButton'\nimport PopConfirm from 'app/mainframe/components/Modals/PopConfirm'\n\nconst PrimerSelect = ({ content }) => {\n const { log } = content\n\n const { mutateAsync: removeLog, isLoading: isLoadingRemove } = useRemoveLog()\n const { data: primers, isLoading: isLoadingPrimers } = useUserPrimersList()\n\n const [filteredPrimers, setFilteredPrimers] = useState(null)\n const [query, setQuery] = useState('')\n\n useEffect(() => {\n if (primers) {\n const primersAfterFilter = filterCurrentPrimers(primers)\n setFilteredPrimers(primersAfterFilter)\n }\n }, [primers, log])\n\n const filterCurrentPrimers = primersToFilter => {\n if (log && log.primers && log.primers.length > 0) {\n const currentPrimersIds = log.primers.map(primer => primer.id)\n const currentPrimers = []\n const filteredPrimers = primersToFilter.filter(primer => {\n if (currentPrimersIds.includes(primer.id)) {\n primer.selected = true\n currentPrimers.push(primer)\n } else {\n return true\n }\n })\n return currentPrimers.concat(filteredPrimers)\n }\n return primersToFilter\n }\n\n const resetFilter = () => {\n setQuery('')\n setFilteredPrimers(primers)\n }\n\n const onInputChange = e => {\n const { value } = e.target\n setQuery(value)\n\n if (primers && primers.length > 0) {\n setFilteredPrimers(\n primers.filter(\n primer =>\n primer.title.toLowerCase().indexOf(value.toLowerCase()) !== -1\n )\n )\n }\n\n // TODO handle enter press (add to first item in list or create collection + add)\n }\n\n const SelectPanel = () => {\n return (\n <>\n {primers && primers.length > 5 && (\n \n
\n New Collection\n \n
\n )}\n \n
\n\n \n {filteredPrimers &&\n filteredPrimers.map(primer => (\n
\n \n {\n if (!isLoadingRemove) {\n removeLog(log.id).then(() => {\n close()\n })\n }\n }}\n >\n
\n \n )\n }\n\n return (\n \n {isLoadingRemove ? (\n
\n \n \n {editor && isOwner && editable && (\n <>\n
\n )\n}\n\nconst uploadImage = (log, currentUser) => file => {\n const uploadUrl = `/api/logs/${log.id}/upload`\n const maxFileSize = 10485760 // 10MB\n\n if (file.size === 0) {\n toast.error('The image you added looks empty.')\n return\n }\n if (file.size > maxFileSize) {\n toast.error('Maximum image size is 10MB.')\n return\n }\n\n const form = new FormData()\n form.append('Content-Type', file.type)\n form.append('file', file)\n\n const config = {\n method: 'POST',\n headers: {\n Authorization: `Token ${currentUser.token}`\n },\n body: form\n }\n\n return window.fetch(uploadUrl, config).then(async response => {\n const data = await response.json()\n if (!response.ok) {\n toast.error('Upload failed. Try to reload the page.')\n return null\n }\n return data\n })\n}\n\nexport default Editor\n","module.exports = __webpack_public_path__ + \"media/shared/assets/img/placeholders/placeholder_1x1-54b7883fa594a6a522ffee83cea69b70.jpg\";","module.exports = __webpack_public_path__ + \"media/shared/assets/img/placeholders/placeholder_2x3-af5b0b7e981018a2a7d3d1d853da9e3a.jpg\";","module.exports = __webpack_public_path__ + \"media/shared/assets/img/placeholders/placeholder_16x9-db5e8e7562bf4e14bb0911726ddb8bca.jpg\";","import { useQuery, useQueryClient, useMutation } from 'react-query'\nimport api from 'app/mainframe/api'\nimport { toast } from 'react-toastify'\n\nconst useLog = (slug, username) =>\n useQuery(['log', slug, username], () => api.Log.get(slug, username))\n\nconst useAddLog = () => {\n const queryClient = useQueryClient()\n return useMutation(api.Log.create, {\n onMutate: async ({ title }) => {\n // TODO optimistically update books\n const toasted = toast.loading(`Adding ${title}`, {\n autoClose: false\n })\n return { toasted }\n },\n onSuccess: (data, variables, context: any) => {\n toast.update(context?.toasted, {\n render: `Added ${variables?.title}`,\n type: 'success',\n autoClose: 3333,\n isLoading: false\n })\n queryClient.invalidateQueries()\n queryClient.invalidateQueries('feed')\n queryClient.invalidateQueries(['content', data.slug])\n queryClient.invalidateQueries(['content', data.slug, 'logs'])\n },\n onError: (error: any, variables, context: any) => {\n toast.update(context?.toasted, {\n render: error.message,\n type: 'error',\n autoClose: 3333,\n isLoading: false\n })\n }\n })\n}\n\nconst useLikeLog = logId => {\n const queryClient = useQueryClient()\n return useMutation(\n (liked: boolean) => (liked ? api.Log.unlike(logId) : api.Log.like(logId)),\n {\n onSuccess: () => {\n queryClient.invalidateQueries(['logs', 'saved'])\n queryClient.invalidateQueries(['logs', 'featured'])\n },\n onError: (error: any, variables, context: any) => {\n toast.error(error.message)\n }\n }\n )\n}\n\nconst useSaveLog = () => {\n const queryClient = useQueryClient()\n return useMutation(api.Log.save, {\n onMutate: async ({ content }) => {\n await queryClient.cancelQueries(['logs', 'saved'])\n\n const previousContent = queryClient.getQueryData([\n 'content',\n content.slug\n ])\n queryClient.setQueryData(['content', content.slug], (data: any) => {\n return { ...data, log: { ...data.log, status: 'saved' } }\n })\n const toasted = toast.loading(`Saving ${content.title}`, {\n autoClose: false\n })\n return { previousContent, toasted }\n },\n onSuccess: (data, variables, context: any) => {\n toast.update(context?.toasted, {\n render: `Saved ${variables.content?.title}`,\n type: 'success',\n autoClose: 3333,\n isLoading: false\n })\n queryClient.invalidateQueries()\n queryClient.invalidateQueries(['logs', 'saved'])\n queryClient.invalidateQueries(['feed'])\n queryClient.invalidateQueries(['content', data.slug])\n queryClient.invalidateQueries(['content', data.slug, 'logs'])\n },\n onError: (error: any, variables, context: any) => {\n toast.update(context?.toasted, {\n render: error.message,\n type: 'error',\n autoClose: 3333,\n isLoading: false\n })\n if (context?.previousContent) {\n queryClient.setQueryData(\n ['content', variables.content.slug],\n context.previousContent\n )\n }\n }\n })\n}\n\nconst useEditLog = (slug, username) => {\n const queryClient = useQueryClient()\n return useMutation(api.Log.update, {\n onSuccess: () => {\n queryClient.invalidateQueries(['content', slug])\n queryClient.invalidateQueries(['content', slug, 'logs'])\n queryClient.invalidateQueries(['log', slug, username])\n queryClient.invalidateQueries('feed')\n },\n onError: (error: any, variables, context: any) => {\n toast.error(error.message)\n }\n })\n}\n\nconst useRemoveLog = () => {\n const queryClient = useQueryClient()\n return useMutation(api.Log.del, {\n onMutate: async content => {\n const toasted = toast.loading('Removing from library', {\n autoClose: false\n })\n const previousContent = queryClient.getQueryData([\n 'content',\n content.slug\n ])\n queryClient.setQueryData(['content', content.slug], (data: any) => {\n return { ...data, log: null }\n })\n return { previousContent, toasted }\n },\n onSuccess: (data, variables, context: any) => {\n queryClient.invalidateQueries()\n toast.update(context?.toasted, {\n render: `Removed ${data.title}`,\n type: 'success',\n autoClose: 3333,\n isLoading: false\n })\n },\n onError: (error: any, variables, context: any) => {\n toast.update(context?.toasted, {\n render: error.message,\n type: 'error',\n autoClose: 3333,\n isLoading: false\n })\n if (context?.previousContent) {\n queryClient.setQueryData(\n ['content', variables.content.slug],\n context.previousContent\n )\n }\n }\n })\n}\n\nconst useFeaturedLogs = () =>\n useQuery(['logs', 'featured'], api.Log.featured, {\n staleTime: Infinity\n })\n\nexport {\n useLog,\n useAddLog,\n useEditLog,\n useRemoveLog,\n useSaveLog,\n useLikeLog,\n useFeaturedLogs\n}\n","import React, { createContext, useContext } from 'react'\nimport mixpanel from 'mixpanel-browser'\n\nlet isInit = false\n\nconst mixpanelDev = {\n track: (name, properties) => {\n console.log('%cMixpanel:', 'color: #4f44e0; font-weight: 700;', {\n name,\n properties\n })\n }\n}\n\nconst MixpanelContext = createContext(null)\n\nconst MixpanelProvider = ({ children, token = process.env.MIXPANEL_TOKEN }) => {\n if (!!token) {\n mixpanel.init(token)\n isInit = true\n }\n\n return (\n \n {!!hasNote && (\n \n \n )}\n \n Cancel\n \n \n
\n )}\n \n Delete\n
\n{title}
}\n {body}\n \n\n {text}\n
\n\n Start building your library\n
\n\n \n Add to Catalog\n \n )}\n
\n)\n\nconst SearchWrapper = (props: SearchWrapperProps) => {\n const { mixpanel } = useMixpanel()\n\n const { mutateAsync: parseUrl } = useParseContentFromUrl()\n const { mutateAsync: enrichResult } = useEnrichContent()\n const { mutateAsync: addLog } = useAddLog()\n\n const [autocompleteState, setAutocompleteState] = useState<\n AutocompleteState\n \n ↑↓\n \n Select\n
\n \n \n enter\n \n Open\n
\n {onClickAdd && (\n \n \n \n {\n autocomplete.setIsOpen(false)\n autocomplete.setCollections([\n {\n items: [],\n source: autocompleteState.collections[0].source\n }\n ])\n }}\n />\n
\n )}\n\n {noResults && (\n \n {autocompleteState.collections.map(collection => {\n const { source, items } = collection\n const { sourceId } = source\n const index = props.indices\n .filter(index => index.key === sourceId)\n .pop()\n\n if (items && items.length > 0) {\n return (\n \n \n {items.length > 0 &&\n items.map(item => {\n return (\n \n {React.cloneElement(index.component, {\n item\n })}\n \n )\n })}\n \n \n )\n }\n })}\n
\n \n {index.title}\n
\n \n
\n \n In Search of Quality\n
\n\n In order to maintain a level of quality, Analogue\n relies on the curation of our users.\n
\n\n\n Therefore, we've decided not to add all existing\n content from other databases. Every piece of content\n in the database has been referred by a public figure\n or a user of the platform.\n
\n\n\n Thank you for understanding that there may be some\n pieces missing. We hope you will help us add\n meaningful content to our ever-growing catalog.\n
\n \n }\n >\n\n You have exceptional taste.\n
\n\n Help build our catalog.\n
\n\n {enrichOptions.map(option => (\n setMediaType(option)}\n >\n \n {option.icon}\n
\n \n Searching for "\n \n {autocompleteState.query}\n \n "\n
\n \n Select a medium to search for "\n \n {autocompleteState.query}\n \n "\n
\n \n {searchResponse.num_results > 0 ? (\n mediaType.media.map(\n (key, keyIndex) =>\n searchResponse[key].length > 0 && (\n \n \n setSelectedResult({\n keyIndex,\n index: itemIndex\n })\n }\n onMouseLeave={() =>\n setSelectedResult({\n keyIndex: -1,\n index: -1\n })\n }\n onClick={() =>\n onAddFromSearch(keyIndex, itemIndex)\n }\n >\n \n )\n )\n ) : (\n \n \n )}\n
\n )}\n \n\n {searchResponse && searchResponse.num_results > 0 && \n {key}\n
\n {searchResponse[key].map((item, itemIndex) => (\n \n
\n \n
\n \n ))}\n \n {item.title}\n
\n {item.creators && item.creators.length > 0 ? (\n \n {item.creators}\n
\n ) : (\n \n {item.published_at}\n
\n )}\n \n
\n \n No results for "\n \n {autocompleteState.query}\n \n "\n
\n \n
\n \n
\n)\n\nexport default ContentResult\n","import React from 'react'\nimport { Link } from 'react-router-dom'\n\nimport Image from 'app/mainframe/components/Image'\n\nconst PrimerResult = ({ item = null }) => (\n \n \n
\n \n c.value).join(', ')\n : item.creator_list.join(', ')\n }}\n />\n
\n \n
\n \n c.value).join(', ')\n : item.user_list.join(', ')\n }}\n />\n
\n \n)\n\nexport default PrimerResult\n","import React from 'react'\nimport { useNavigate } from 'react-router-dom'\nimport NiceModal from '@ebay/nice-modal-react'\n\nimport { useAuth } from 'app/mainframe/context/auth'\n\nimport SearchWrapper from 'app/mainframe/components/Search/SearchWrapper'\nimport ProfileResult from 'app/mainframe/components/Search/results/ProfileResult'\nimport ContentResult from 'app/mainframe/components/Search/results/ContentResult'\nimport PrimerResult from 'app/mainframe/components/Search/results/PrimerResult'\n\nconst getIndex = (key, currentUser) => {\n const indices = {\n user: {\n key: 'user',\n title: 'People',\n indexName: `User_${process.env.ALGOLIASEARCH_INDEX}`,\n filter: `has_works?:true OR public:true${\n currentUser\n ? ` OR follower_ids:${currentUser.id} OR following_ids:${\n currentUser.id\n }${currentUser.followingIds.map(\n userId => ` OR following_ids:${userId}`\n )}`\n : ''\n }`,\n component: \n {content && (\n
\n )}\n \n {logs &&\n logs.length > 1 &&\n currentSlide !== _flickity.current?.slides.length - 1 && (\n \n
\n )}\n \n )\n }\n)\n\nexport default LogCarouselModal\n","import React from 'react'\nimport { ToastContainer, Slide } from 'react-toastify'\nimport 'react-toastify/dist/ReactToastify.min.css'\nimport './ToastConfig.css'\n\nconst ToastConfig = () => (\n \n {actor.name ? actor.name : actor.username}\n
\n{message}
\n {content ? (\n\n
\n ) : (\n \n
\n )\n }\n if (data && data.length === 0) {\n return (\n \n \n
\n )\n }\n return data.map(item => {\n return You're all caught up
\n\n When someone follows you, you’ll be notified here.\n
\n\n
\n \n
\n \n {`Notifications${unreadCount ? ` (${unreadCount})` : ''}`}\n
\n \n {isFetching && !isLoading && (\n
\n \n navigate(-1) : null}\n unstyled\n type='text'\n className='mr-4 p-0 text-2xl'\n >\n navigate(1) : null}\n unstyled\n type='text'\n className='p-0 text-2xl'\n >\n
\n\n \n NiceModal.show('log-editor-modal')}\n >\n {\n if (item.onClick) {\n return (\n \n )\n }\n return {item.text}\n })\n }\n ]}\n >\n
\n \n 
\n \n\n
\n )\n}\n\nexport default MobileBar\n","import React from 'react'\nimport { Link, useLocation } from 'react-router-dom'\n\nimport { useAuth } from 'app/mainframe/context/auth'\nimport { FiCompass, FiBookmark, FiUser } from 'react-icons/fi'\n\nimport analogueIcon from 'shared/assets/img/icon_gold_transparent.png'\nimport clsx from 'clsx'\n\nconst Sidebar = () => {\n const { currentUser } = useAuth()\n const { pathname } = useLocation()\n\n const links = [\n {\n name: 'Profile',\n pathname: `/@${currentUser.username}`,\n icon: \n navigate(-1) : null}\n unstyled\n type='text'\n className='mr-5 p-0 text-3xl'\n >\n navigate(1) : null}\n unstyled\n type='text'\n className='p-0 text-3xl'\n >\n
\n\n \n \n Profile,\n Settings,\n Membership,\n \n ]\n }\n ]}\n >\n
\n \n \n \n \n \n
\n )\n}\n\nexport default Sidebar\n","import React from 'react'\nimport { getTrackBackground, Range } from 'react-range'\n\nfunction CustomRange({ value, step, min, max, onChange }) {\n return (\n \n beta\n
\n \n\n \n {links.map(link => {\n const isActive = pathname === link.pathname\n return (\n \n {React.cloneElement(link.icon, {\n className: clsx([\n 'mx-auto stroke-1 transition duration-200',\n isActive\n ? 'text-gold-500'\n : 'text-gray-300 hover:text-gold-500'\n ])\n })}\n \n )\n })}\n
\n\n \n