Update: bump package version and add story

watermark watermark
Casm101 · Dec 1, 2023 · f6e4019 · f6e4019
1 parent f299252
commit f6e4019
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@casm101/react-stories",
   "description": "Simple and dynamic Metainspired story component in React!",
   "private": false,
-  "version": "0.0.2-alpha",
+  "version": "0.0.1-beta",
   "type": "module",
   "scripts": {
     "dev": "vite --host",

diff --git a/src/App.tsx b/src/App.tsx
@@ -10,6 +10,10 @@ function App() {
         loop={true}
         height='100dvh'
         width='100dvw'
+        watermark={{
+          image: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpngimg.com%2Fuploads%2Fgithub%2Fgithub_PNG80.png&f=1&nofb=1&ipt=7b2e28bc05267cd350f52030c5acc05e0892fd3899074eb70b9f4fe0f1c29b2e&ipo=images',
+          position: 'bottom-right'
+        }}
         stories={[
           {
             type: 'custom',
@@ -60,8 +64,8 @@ function App() {
             },
             story: (isMuted?: boolean, isPaused?: boolean) => (
               <div className='custom-story interactive'>
-                <p className='states'>{ isPaused ? '> Paused' : '> Playing' }</p>
-                <p className='states'>{ isMuted ? '> Muted' : '> Playing Sound' }</p>
+                <p className='states'>{isPaused ? '> Paused' : '> Playing'}</p>
+                <p className='states'>{isMuted ? '> Muted' : '> Playing Sound'}</p>
                 <p className='title'>Full access to paused and muted states for your custom components.</p>
               </div>
             )
@@ -71,13 +75,17 @@ function App() {
     </main>
   );
 
-  
+
   return (
     <>
       <main>
         <section>
           <ReactStory
             loop={true}
+            watermark={{
+              image: 'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpngimg.com%2Fuploads%2Fgithub%2Fgithub_PNG80.png&f=1&nofb=1&ipt=7b2e28bc05267cd350f52030c5acc05e0892fd3899074eb70b9f4fe0f1c29b2e&ipo=images',
+              position: 'bottom-right'
+            }}
             stories={[
               {
                 type: 'custom',
@@ -128,8 +136,8 @@ function App() {
                 },
                 story: (isMuted?: boolean, isPaused?: boolean) => (
                   <div className='custom-story interactive'>
-                    <p className='states'>{ isPaused ? '> Paused' : '> Playing' }</p>
-                    <p className='states'>{ isMuted ? '> Muted' : '> Playing Sound' }</p>
+                    <p className='states'>{isPaused ? '> Paused' : '> Playing'}</p>
+                    <p className='states'>{isMuted ? '> Muted' : '> Playing Sound'}</p>
                     <p className='title'>Full access to paused and muted states for your custom components.</p>
                   </div>
                 )
@@ -140,18 +148,22 @@ function App() {
         <section>
           <h1>React Stories</h1>
           <p>Simple and dynamic Meta (Instagram, Facebook, Whatsapp) inspired story component in React!</p>
-          
+
           <div className="shield-container">
-            <img className="shield" alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Casm101/react-stories" />
-            <img className="shield" alt="npm" src="https://img.shields.io/npm/v/%40casm101%2Freact-stories" />
+            <a href="/~https://github.com/Casm101/react-stories" target='_blank'>
+              <img className="shield" alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Casm101/react-stories" />
+            </a>
+            <a href="https://www.npmjs.com/package/@casm101/react-stories" target='_blank'>
+              <img className="shield" alt="npm" src="https://img.shields.io/npm/v/%40casm101%2Freact-stories" />
+            </a>
           </div>
 
           <p>Get started now!</p>
           <code>
             npm i --save react-stories
           </code>
 
-          <div style={{ display: 'flex', gap: '4rem'}}>
+          <div style={{ display: 'flex', gap: '4rem' }}>
             <div>
               <p style={{ marginBottom: '1rem' }}>Prepaired for both mobile and desktop</p>
               <div className='block'>

diff --git a/src/components/ReactStory/index.tsx b/src/components/ReactStory/index.tsx
@@ -21,20 +21,25 @@ type ReactStoryProps = {
     height?: string;
     width?: string;
     loop?: boolean;
+    watermark?: {
+        image: string;
+        position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    };
     defaultDuration?: number;
     preloadedAssets?: number;
 };
 
 
 export const ReactStory = ({
     stories,
-    loop = false,
-    defaultDuration = 5000,
     height,
     width,
+    loop = false,
+    watermark,
+    defaultDuration = 5000,
     preloadedAssets = 2
 }: ReactStoryProps) => {
-    
+
     const [pause, setPause] = useState<boolean>(false);
     const [isMuted, setMuted] = useState<boolean>(false);
     const [storyTimers, setStoryTimers] = useState<React.ReactNode[]>([]);
@@ -45,7 +50,7 @@ export const ReactStory = ({
 
     const mousedownId = useRef<number>();
 
-    
+
     // Function to toggle muted state
     const toggleMuted = () => {
         setMuted(current => !current);
@@ -94,14 +99,14 @@ export const ReactStory = ({
 
     // Function to toggle overlay visibility (on mouse up event)
     const mouseUpAction = (action: 'prev' | 'next') => (e: React.MouseEvent | React.TouchEvent) => {
-      e.preventDefault();
-      mousedownId.current && clearTimeout(mousedownId.current);
-      if (pause) {
-        setPause(false);
-      } else {
-        if (action == 'prev') prevStory();
-        if (action == 'next') nextStory();
-      }
+        e.preventDefault();
+        mousedownId.current && clearTimeout(mousedownId.current);
+        if (pause) {
+            setPause(false);
+        } else {
+            if (action == 'prev') prevStory();
+            if (action == 'next') nextStory();
+        }
     };
 
     // Function to handle keyboard events
@@ -164,7 +169,7 @@ export const ReactStory = ({
 
             {/* Story header container */}
             <div className={["story-header", pause ? 'hidden' : null].join(' ')}>
-                
+
                 {/* Story timer container */}
                 <div className="story-timer-container">
                     {storyTimers}
@@ -173,7 +178,7 @@ export const ReactStory = ({
                 {/* Story enhanced controls */}
                 <div className="story-user-controls">
                     <span className='sound' onClick={toggleMuted}>
-                        { isMuted ?
+                        {isMuted ?
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.531V19.94a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.506-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.395C2.806 8.757 3.63 8.25 4.51 8.25H6.75z" /></svg> :
                             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6"><path strokeLinecap="round" strokeLinejoin="round" d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z" /></svg>
                         }
@@ -184,13 +189,20 @@ export const ReactStory = ({
                 </div>
             </div>
 
+            {/* Story watermark */}
+            {watermark &&
+                <div className={["story-watermark", watermark.position].join(' ')}>
+                    <img src={watermark.image} alt='watermark image' />
+                </div>
+            }
+
             {/* Story see more container */}
             <div className="story-seemore">
                 <div className='seemore-wrapper' onClick={stories[currentStory]?.seeMore?.action}>
                     {stories[currentStory]?.seeMore?.type === 'standard' &&
                         <>
                             <span>⌃</span>
-                            <span>See More</span>    
+                            <span>See More</span>
                         </>
                     }
 

diff --git a/src/components/ReactStory/styles.scss b/src/components/ReactStory/styles.scss
@@ -4,9 +4,9 @@
     position: relative;
 
     border-radius: .45rem;
-    
+
     background: #272633;
-    
+
     overflow: hidden;
     transition: height .5s, width .5s;
 
@@ -18,10 +18,10 @@
 
         width: 100%;
         height: 100%;
-        
+
         z-index: 10;
 
-        > * {
+        >* {
             width: 100%;
             height: 100%;
             object-fit: cover;
@@ -131,6 +131,37 @@
         }
     }
 
+    // Story watermark styling
+    .story-watermark {
+
+        position: absolute;
+        bottom: .75rem;
+        right: .75rem;
+        z-index: 20;
+
+        &.top-left {
+            top: 3.5rem;
+            left: .75rem;
+        }
+
+        &.top-right {
+            top: 3.5rem;
+            right: .75rem;
+        }
+
+        &.bottom-left {
+            bottom: .75rem;
+            left: .75rem;
+        }
+
+        img {
+            width: 3rem;
+            opacity: .5;
+            filter: saturate(0);
+        }
+    }
+
+    // Controls styling
     .story-controls {
         display: flex;
         flex-direction: row;
@@ -140,7 +171,8 @@
 
         z-index: 90;
 
-        .previous-story, .next-story {
+        .previous-story,
+        .next-story {
             height: 100%;
             width: 50%;
             cursor: pointer;

diff --git a/src/global.scss b/src/global.scss
@@ -1,4 +1,6 @@
-*, html, body {
+*,
+html,
+body {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
@@ -14,8 +16,8 @@ main {
   justify-content: center;
   gap: 10rem;
 
-  width: 100vw;
-  height: 100vh;
+  width: 100dvw;
+  height: 100dvh;
 
   background-color: #0f0f0f;
   color: #fff;
@@ -39,7 +41,8 @@ h1 {
   font-size: 2rem;
 }
 
-code, .block {
+code,
+.block {
   font-size: 1.1srem;
   background: #1b1b22;
   padding: .5rem;