feat(): Adding music feature

Author: ar1603

package.json

@@ -31,6 +31,7 @@
     "@react-three/drei": "^9.121.2",
     "@react-three/fiber": "^8.17.12",
     "@react-three/postprocessing": "^2.16.6",
+    "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

public/bg.mp3

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+function MusicIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="1em"
+      height="1em"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M12 3v10.55c-.59-.34-1.27-.55-2-.55c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4V7h4V3z"
+      ></path>
+    </svg>
+  );
+}
+
+export default MusicIcon;

src/assets/icons/Common/Music.tsx

@@ -0,0 +1,20 @@
+import { SVGProps } from 'react';
+
+function MusicOffIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      width="1em"
+      height="1em"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M4.27 3L3 4.27l9 9v.28c-.59-.34-1.27-.55-2-.55c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4v-1.73L19.73 21L21 19.73zM14 7h4V3h-6v5.18l2 2z"
+      ></path>
+    </svg>
+  );
+}
+
+export default MusicOffIcon;

src/assets/icons/Common/MusicOff.tsx

@@ -1,6 +1,8 @@
 export { SearchIcon } from './Search';
 export { ThreeDIcon } from './3D';
 export { TwoDIcon } from './2D';
+export { default as MusicIcon } from './Music';
+export { default as MusicOffIcon } from './MusicOff';
 export { default as ArrowIcon } from './ArrowIcon';
 export { default as RobotIcon } from './Robot';
 export { default as LinkedInIcon } from './LinkedInIcon';

src/assets/icons/Common/index.ts

@@ -1,11 +1,12 @@
 import {
   toolbarPlugin,
-  KitchenSinkToolbar,
   listsPlugin,
   quotePlugin,
   headingsPlugin,
   linkPlugin,
   linkDialogPlugin,
+  UndoRedo,
+  BoldItalicUnderlineToggles,
   imagePlugin,
   tablePlugin,
   thematicBreakPlugin,
@@ -16,18 +17,21 @@ import {
   markdownShortcutPlugin,
   AdmonitionDirectiveDescriptor,
   directivesPlugin,
+  KitchenSinkToolbar,
 } from '@mdxeditor/editor';
 
 export const ALL_PLUGINS = [
-  toolbarPlugin({ toolbarContents: () => <KitchenSinkToolbar /> }),
-  listsPlugin(),
-  quotePlugin({
-    quoteAutocompleteSuggestions: [
-      'https://via.placeholder.com/150',
-      'https://via.placeholder.com/150',
-    ],
+  toolbarPlugin({
+    toolbarContents: () => (
+      <>
+        <UndoRedo />
+        <BoldItalicUnderlineToggles />
+        <KitchenSinkToolbar />
+      </>
+    ),
   }),
-  headingsPlugin({ allowedHeadingLevels: [1, 2, 3] }),
+  quotePlugin({ quoteTypes: ['blockquote', 'pullquote'], pullquote: true }),
+  headingsPlugin(),
   linkPlugin(),
   linkDialogPlugin(),
   imagePlugin({
@@ -38,11 +42,15 @@ export const ALL_PLUGINS = [
     imageUploadHandler: async () =>
       Promise.resolve('https://picsum.photos/200/300'),
   }),
+  listsPlugin({
+    orderedList: true,
+    unorderedList: true,
+    taskList: true,
+  }),
   tablePlugin(),
   thematicBreakPlugin(),
   frontmatterPlugin(),
-  codeBlockPlugin({ defaultCodeBlockLanguage: '' }),
-  //   sandpackPlugin({ sandpackConfig: virtuosoSampleSandpackConfig }),
+  codeBlockPlugin({ defaultCodeBlockLanguage: 'js' }),
   codeMirrorPlugin({
     codeBlockLanguages: {
       js: 'JavaScript',

src/screens/articleEditor/AllPlugins.tsx

@@ -5,6 +5,21 @@ import '@mdxeditor/editor/style.css';
 import { useCursor } from '@components';
 import { useLayoutEffect } from 'react';
 
+const MD_Example = `
+# Hello world
+This is a paragraph
+
+- This is a list
+- This is another list
+
+\`\`\`js
+console.log('Hello world');
+\`\`\`
+
+This is a code block
+
+`;
+
 const ArticleEditor = () => {
   const { setCursorType } = useCursor();
   useLayoutEffect(() => {
@@ -15,21 +30,23 @@ const ArticleEditor = () => {
   }, [setCursorType]);
   return (
     <VStack px={10} pt={20} width={'100vw'} rowGap={4} bg={'black'}>
-      <Input placeholder="Title" />
-      <Input placeholder="Description" />
+      <VStack w={'50%'} rowGap={4}>
+        <Input placeholder="Title" />
+        <Input placeholder="Subtitle" />
+      </VStack>
       <Box
         width={'100%'}
-        bg={'black'}
         border={'1px solid white'}
         borderRadius={'md'}
         p={2}
+        className=" min-h-[100vh]"
       >
         <MDXEditor
-          className="w-full"
-          markdown="# Hello world"
+          className="bg-white"
+          markdown={MD_Example}
           plugins={ALL_PLUGINS}
           spellCheck={true}
-          contentEditableClassName="w-[100%] h-96 text-white"
+          contentEditableClassName="min-h-[100vh] px-6 py-6 prose"
         />
       </Box>
     </VStack>

src/screens/articleEditor/ArticleEditor.tsx

@@ -3,6 +3,8 @@ import {
   InstagramIcon,
   LinkedInIcon,
   MediumIcon,
+  MusicIcon,
+  MusicOffIcon,
   RobotIcon,
 } from '@assets';
 import {
@@ -16,7 +18,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { useCursor } from '@components';
-import { RefObject, useRef } from 'react';
+import { RefObject, useEffect, useRef, useState } from 'react';
 import { CharacterType } from '../scene';
 import { CONTACT } from '@data';
 
@@ -39,10 +41,22 @@ const SocialNavigation = ({
   handleCharacterClick: (type: CharacterType) => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const [isPlaying, setIsPlaying] = useState(true);
+
+  useEffect(() => {
+    if (isPlaying) {
+      document.querySelector('audio')?.play();
+    } else {
+      document.querySelector('audio')?.pause();
+    }
+  }, [isPlaying]);
+
   const menuButtonRef = useRef<HTMLDivElement>(null);
+  const musicRef = useRef<HTMLButtonElement>(null);
   const { setCursorInsets } = useCursor();
   const onMouseEnter =
-    (ref: RefObject<HTMLDivElement>, radius: string) => () => {
+    (ref: RefObject<HTMLDivElement | HTMLButtonElement>, radius: string) =>
+    () => {
       const { width, height, top, left } =
         ref.current?.getBoundingClientRect() || {
           width: 56,
@@ -60,7 +74,34 @@ const SocialNavigation = ({
   };
 
   return (
-    <VStack position={'fixed'} bottom={20} right={14} rowGap={10} zIndex={1}>
+    <VStack position={'fixed'} bottom={20} right={14} rowGap={6} zIndex={1}>
+      <IconButton
+        ref={musicRef}
+        aria-label={'music'}
+        borderColor={'gray'}
+        boxShadow={'0px 0px 10px 3px gray'}
+        bg={'rgba(255, 255, 255, 0.1)'}
+        backdropFilter={'blur(20px)'}
+        transition={'background-color 0.3s'}
+        padding={2}
+        borderRadius={'10px'}
+        icon={
+          isPlaying ? (
+            <MusicIcon width={'1.5em'} height={'1.5em'} color="white" />
+          ) : (
+            <MusicOffIcon width={'1.5em'} height={'1.5em'} color="white" />
+          )
+        }
+        onClick={() => setIsPlaying(!isPlaying)}
+        onMouseEnter={onMouseEnter(musicRef, '10px')}
+        onMouseLeave={onMouseLeave}
+      />
+      <audio src="bg.mp3" loop hidden autoPlay>
+        <p>
+          If you are reading this, it is because your browser does not support
+          the audio element.
+        </p>
+      </audio>
       <Box
         ref={menuButtonRef}
         zIndex={1}

src/screens/articleEditor/darkeditor.css

@@ -4,5 +4,5 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/typography')],
 };