refactor(welcome): Reimagining of the introductory user experience

src/features/background/api/getOfflineImage.js

@@ -1,4 +1,5 @@
 import offlineImages from '../offline_images.json';
+let lastImage = null;
 
 /**
  * It gets a random photographer from the offlineImages.json file, then gets a random image from that
@@ -14,12 +15,18 @@ import offlineImages from '../offline_images.json';
  */
 export function getOfflineImage(type) {
   const photographers = Object.keys(offlineImages);
-  const photographer = photographers[Math.floor(Math.random() * photographers.length)];
+  let photographer;
+  let randomImage;
 
-  const randomImage =
-    offlineImages[photographer].photo[
-      Math.floor(Math.random() * offlineImages[photographer].photo.length)
-    ];
+  do {
+    photographer = photographers[Math.floor(Math.random() * photographers.length)];
+    randomImage =
+      offlineImages[photographer].photo[
+        Math.floor(Math.random() * offlineImages[photographer].photo.length)
+      ];
+  } while (lastImage === randomImage);
+
+  lastImage = randomImage;
 
   const object = {
     url: `src/assets/offline-images/${randomImage}.webp`,

src/features/misc/modals/Modals.jsx

@@ -92,7 +92,7 @@ export default class Modals extends PureComponent {
         >
           <MainModal modalClose={() => this.toggleModal('mainModal', false)} />
         </Modal>
-        <Modal
+        {/*<Modal
           closeTimeoutMS={300}
           onRequestClose={() => this.closeWelcome()}
           isOpen={this.state.welcomeModal}
@@ -102,7 +102,7 @@ export default class Modals extends PureComponent {
           ariaHideApp={false}
         >
           <Welcome modalClose={() => this.closeWelcome()} modalSkip={() => this.previewWelcome()} />
-        </Modal>
+        </Modal>*/}
         {this.state.preview && <Preview setup={() => window.location.reload()} />}
       </>
     );

src/features/welcome/Welcome.jsx

@@ -6,8 +6,11 @@ import { MdArrowBackIosNew, MdArrowForwardIos, MdOutlinePreview } from 'react-ic
 import EventBus from 'utils/eventbus';
 
 import { ProgressBar, AsideImage } from './components/Elements';
+import { motion, AnimatePresence } from 'framer-motion';
 import { Button } from 'components/Elements';
 import { Wrapper, Panel } from './components/Layout';
+import { getOfflineImage } from 'features/background/api/getOfflineImage.js';
+import offline_quotes from 'features/quote/offline_quotes.json'; // Import the quotes
 
 import './welcome.scss';
 
@@ -22,17 +25,25 @@ import {
 } from './components/Sections';
 
 // WelcomeModal component
-function WelcomeModal({ modalClose, modalSkip }) {
+function WelcomeModal() {
   // State variables
   const [currentTab, setCurrentTab] = useState(0);
   const [buttonText, setButtonText] = useState(variables.getMessage('modals.welcome.buttons.next'));
   const [importedSettings, setImportedSettings] = useState([]);
+  const [image, setImage] = useState(null); // New state variable for the image
+  const [credit, setCredit] = useState(''); // New state variable for the credit
   const finalTab = 6;
+  const [direction, setDirection] = useState(1); // New state variable for the direction
+  const [firstRender, setFirstRender] = useState(true); // New state variable for the first render
+  const [quote, setQuote] = useState(''); // New state variable for the quote
 
   // useEffect hook to handle tab changes and event bus listener
   useEffect(() => {
     // Get the current welcome tab from local storage
+    setFirstRender(false);
     const welcomeTab = localStorage.getItem('welcomeTab');
+    const randomQuote = offline_quotes[Math.floor(Math.random() * offline_quotes.length)].quote;
+    setQuote(randomQuote);
     if (welcomeTab) {
       const tab = Number(welcomeTab);
       setCurrentTab(tab);
@@ -43,6 +54,14 @@ function WelcomeModal({ modalClose, modalSkip }) {
       );
     }
 
+    let offlineImage = null;
+    // Fetch the offline image if the current tab is 0
+    if (offlineImage === null) {
+      offlineImage = getOfflineImage('background');
+      setImage(offlineImage.url);
+      setCredit(offlineImage.photoInfo.credit);
+    }
+
     // Listener for the 'refresh' event
     const refreshListener = (data) => {
       if (data === 'welcomeLanguage') {
@@ -76,12 +95,14 @@ function WelcomeModal({ modalClose, modalSkip }) {
 
   // Functions to navigate to the previous and next tabs
   const prevTab = () => {
+    setDirection(-1); // Update the direction
     updateTabAndButtonText(currentTab - 1);
   };
 
   const nextTab = () => {
+    setDirection(1);
     if (buttonText === variables.getMessage('modals.welcome.buttons.finish')) {
-      modalClose();
+      // modalClose();
       return;
     }
     updateTabAndButtonText(currentTab + 1);
@@ -106,7 +127,7 @@ function WelcomeModal({ modalClose, modalSkip }) {
         ) : (
           <Button
             type="settings"
-            onClick={() => modalSkip()}
+            //onClick={() => modalSkip()}
             icon={<MdOutlinePreview />}
             label={variables.getMessage('modals.welcome.buttons.preview')}
           />
@@ -142,16 +163,60 @@ function WelcomeModal({ modalClose, modalSkip }) {
   return (
     <Wrapper>
       <Panel type="aside">
-        <AsideImage currentTab={currentTab} />
-        <ProgressBar numberOfTabs={finalTab + 1} currentTab={currentTab} switchTab={switchToTab} />
+        <motion.div
+          style={{
+            backgroundImage: `url(${image})`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center',
+            height: '100%', // adjust as needed
+            width: '100%', // adjust as needed
+          }}
+          className="grid place-items-center text-center"
+          key={currentTab}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          transition={{ type: 'spring', duration: 2 }}
+        >
+          <motion.span
+            className="text-[40px] font-bold max-w-[50%]"
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 0 }}
+            transition={{ type: 'spring', duration: 2 }}
+            key={currentTab}
+          >
+            "{quote}"
+          </motion.span>
+        </motion.div>
+        <div className="welcomeCredit">
+          {variables.getMessage('widgets.background.credit')}{' '}
+          <motion.span
+            initial={{ opacity: 0, x: -100 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={{ opacity: 0, x: 0 }}
+            transition={{ type: 'spring', duration: 2 }}
+            key={currentTab}
+          >
+            {credit}
+          </motion.span>
+        </div>
+        {/*<AsideImage currentTab={currentTab} />
+        <ProgressBar numberOfTabs={finalTab + 1} currentTab={currentTab} switchTab={switchToTab} />*/}
       </Panel>
-      <Panel type="content">
-        {CurrentTab}
+      <Panel type="content" key={currentTab}>
+        <motion.div
+          initial={{ opacity: 0, x: firstRender ? 0 : 100 * direction }}
+          animate={{ opacity: 1, x: 0 }}
+          exit={{ opacity: 0, x: 100 * direction }}
+        >
+          {CurrentTab}
+        </motion.div>
         <Navigation
           currentTab={currentTab}
           changeTab={switchToTab}
           buttonText={buttonText}
-          modalSkip={modalSkip}
+          //modalSkip={modalSkip}
         />
       </Panel>
     </Wrapper>

src/features/welcome/components/Sections/Intro.jsx

@@ -56,7 +56,7 @@ function Intro() {
   return (
     <Content>
       <Header title={variables.getMessage('modals.welcome.sections.intro.title')} />
-      {ShareYourMue}
+      {/*{ShareYourMue}*/}
       <WelcomeNotice
         config={{
           icon: MdOutlineWavingHand,

src/features/welcome/welcome.scss

@@ -12,6 +12,12 @@
     background-color: t($modal-background);
   }
 
+  .welcomeCredit {
+    position: absolute;
+    bottom: 1rem;
+    left: 1rem;
+  }
+
   .MuiFormControlLabel-root {
     margin-right: 0;
   }
@@ -25,8 +31,8 @@
 
   @extend %tabText;
 
-  height: 80vh;
-  width: clamp(60vw, 1200px, 90vw);
+  height: 100vh;
+  width: 100vw;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(1, 1fr);
@@ -42,11 +48,18 @@
     }
   }
 
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
   section.content {
     display: flex;
     flex-flow: column;
     justify-content: space-between;
     overflow-y: auto;
+    overflow-x: hidden;
 
     .content {
       display: flex;
@@ -167,7 +180,6 @@
 }
 
 .upload {
-  width: 100%;
   height: 100%;
   border-radius: 20px;
   border: none;