From f6e4019d9f5cb10db3a9c64fbaf02ad0a58edf02 Mon Sep 17 00:00:00 2001 From: "Christian A. Smith Mantas" Date: Fri, 1 Dec 2023 20:53:09 +0100 Subject: [PATCH] Update: bump package version and add story watermark watermark --- package.json | 2 +- src/App.tsx | 30 +++++++++++++------ src/components/ReactStory/index.tsx | 42 +++++++++++++++++---------- src/components/ReactStory/styles.scss | 42 +++++++++++++++++++++++---- src/global.scss | 11 ++++--- 5 files changed, 93 insertions(+), 34 deletions(-) diff --git a/package.json b/package.json index fa62ca6..db7239c 100644 --- 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 index b4334be..dc610db 100644 --- 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) => (
-

{ isPaused ? '> Paused' : '> Playing' }

-

{ isMuted ? '> Muted' : '> Playing Sound' }

+

{isPaused ? '> Paused' : '> Playing'}

+

{isMuted ? '> Muted' : '> Playing Sound'}

Full access to paused and muted states for your custom components.

) @@ -71,13 +75,17 @@ function App() { ); - + return ( <>
(
-

{ isPaused ? '> Paused' : '> Playing' }

-

{ isMuted ? '> Muted' : '> Playing Sound' }

+

{isPaused ? '> Paused' : '> Playing'}

+

{isMuted ? '> Muted' : '> Playing Sound'}

Full access to paused and muted states for your custom components.

) @@ -140,10 +148,14 @@ function App() {

React Stories

Simple and dynamic Meta (Instagram, Facebook, Whatsapp) inspired story component in React!

- +
- GitHub Repo stars - npm + + GitHub Repo stars + + + npm +

Get started now!

@@ -151,7 +163,7 @@ function App() { npm i --save react-stories -
+

Prepaired for both mobile and desktop

diff --git a/src/components/ReactStory/index.tsx b/src/components/ReactStory/index.tsx index 429811c..0f47e76 100644 --- a/src/components/ReactStory/index.tsx +++ b/src/components/ReactStory/index.tsx @@ -21,6 +21,10 @@ type ReactStoryProps = { height?: string; width?: string; loop?: boolean; + watermark?: { + image: string; + position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'; + }; defaultDuration?: number; preloadedAssets?: number; }; @@ -28,13 +32,14 @@ type ReactStoryProps = { export const ReactStory = ({ stories, - loop = false, - defaultDuration = 5000, height, width, + loop = false, + watermark, + defaultDuration = 5000, preloadedAssets = 2 }: ReactStoryProps) => { - + const [pause, setPause] = useState(false); const [isMuted, setMuted] = useState(false); const [storyTimers, setStoryTimers] = useState([]); @@ -45,7 +50,7 @@ export const ReactStory = ({ const mousedownId = useRef(); - + // 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 */}
- + {/* Story timer container */}
{storyTimers} @@ -173,7 +178,7 @@ export const ReactStory = ({ {/* Story enhanced controls */}
- { isMuted ? + {isMuted ? : } @@ -184,13 +189,20 @@ export const ReactStory = ({
+ {/* Story watermark */} + {watermark && +
+ watermark image +
+ } + {/* Story see more container */}
{stories[currentStory]?.seeMore?.type === 'standard' && <> ⌃ - See More + See More } diff --git a/src/components/ReactStory/styles.scss b/src/components/ReactStory/styles.scss index 112bbac..ca2d0df 100644 --- 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 index 62f1fdf..d32dd0e 100644 --- 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;