update

9 months ago · cc243e6767
parent 747e8f413f
commit cc243e6767
4 changed files with 107 additions and 43 deletions
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
    "@headlessui/react": "^1.7.18",
    "@heroicons/react": "^2.1.1",
    "@tailwindcss/typography": "^0.5.10",
+    "ahooks": "^3.7.10",
    "clsx": "^2.1.0",
    "next": "14.1.0",
    "next-intl": "^3.7.0",
@ -20,14 +21,14 @@
    "uuid": "^9.0.1"
  },
  "devDependencies": {
-    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "typescript": "^5"
  }
 }
--- a/src/app/[locale]/PageComponent.tsx
+++ b/src/app/[locale]/PageComponent.tsx
@ -6,6 +6,7 @@ import {useState} from "react";
 import {allVideoList, randomVideo} from "~/data/openaiVideo";
 import HeadInfo from "~/components/HeadInfo";
 import {useCommonContext} from "~/context/common-context";
+import {useInterval} from "ahooks";

 const PageComponent = ({
                         locale = '',
@ -51,12 +52,49 @@ const PageComponent = ({
        url: result.data[0].url
      }
      setVideo(video);
+
+      // add storage
+      const videoHistoryListStr = localStorage.getItem('videoHistoryList');
+      if (!videoHistoryListStr) {
+        const videoHistoryList = [];
+        videoHistoryList.unshift(video);
+        localStorage.setItem('videoHistoryList', JSON.stringify(videoHistoryList));
+      } else {
+        const videoHistoryList = JSON.parse(videoHistoryListStr);
+        // check exist
+        let exist = false;
+        for (let i = 0; i < videoHistoryList.length; i++) {
+          const videoHistory = videoHistoryList[i];
+          if (videoHistory.revised_prompt == video.revised_prompt) {
+            exist = true;
+            return;
+          }
+        }
+        if (!exist) {
+          videoHistoryList.unshift(video);
+          // const newList = videoHistoryList.slice(0, 3);
+          localStorage.setItem('videoHistoryList', JSON.stringify(videoHistoryList));
+        }
+      }
    }
  }

  const [video, setVideo] = useState({revised_prompt:'', url:''});
  const [videoList, setVideoList] = useState(initVideoList);

+  const [videoHistoryList, setVideoHistoryList] = useState([]);
+  const [intervalLocalStorage, setIntervalLocalStorage] = useState(500);
+
+  useInterval(() => {
+    const videoHistoryListStr = localStorage.getItem('videoHistoryList');
+    if (videoHistoryListStr) {
+      const videoHistoryList = JSON.parse(videoHistoryListStr);
+      setVideoHistoryList(videoHistoryList)
+    } else {
+      setVideoHistoryList([])
+    }
+  }, intervalLocalStorage);
+
  return (
    <>
      <HeadInfo
@ -137,6 +175,39 @@ const PageComponent = ({
                null
            }

+            {
+              videoHistoryList.length > 0 ?
+                <div className={"border-[14px] border-[#ffffff1f] object-fill w-[90%] mx-auto mt-8"}>
+                  <div className={"mx-auto bg-white"}>
+                    <h2
+                      className={"text-blue-500 pt-4 text-4xl flex justify-center items-center"}>History</h2>
+                    <ul role={"list"} className={"divide-y divide-gray-300"}>
+                      {
+                        videoHistoryList?.map((item, index) => (
+                          <li key={item.revised_prompt + 'index' + item.url} className={"px-6 py-4"}>
+                            <div className={"flex-col"}>
+                              <div className={"flex justify-center items-center"}>
+                                <video
+                                  id={"videoId" + item.revised_prompt}
+                                  controls={true}
+                                  autoPlay={false}
+                                  src={item.url}
+                                ></video>
+                              </div>
+                              <div className={"text-gray-500"}>
+                                {currentLanguageText.prompt}: {item.revised_prompt}
+                              </div>
+                            </div>
+                          </li>
+                        ))
+                      }
+                    </ul>
+                  </div>
+                </div>
+                :
+                null
+            }
+
            <div className={"border-[14px] border-[#ffffff1f] object-fill w-[90%] mx-auto mt-8"}>
              <div className={"mx-auto bg-white"}>
                <div className={"pb-2 border-b-2"}>
@ -146,7 +217,7 @@ const PageComponent = ({
                <ul role={"list"} className={"divide-y divide-gray-300"}>
                  {
                    videoList?.map((item, index) => (
-                      <li key={item.prompt + item.keywords} className={"px-6 py-4"}>
+                      <li key={item.prompt + item.videoUrl} className={"px-6 py-4"}>
                        <div className={"flex-col"}>
                          <div className={"flex justify-center items-center"}>
                            <video
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@ -8,38 +8,12 @@ const navigation = {
  legal: [
    {name: 'Privacy Policy', href: '/privacy-policy'},
    {name: 'Terms & Conditions', href: '/terms-of-service'},
-  ],
-  social: [
-    {
-      name: 'Official',
-      href: 'https://sorawebui.com',
-      icon: () => (
-        <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="M12 21v-8.25M15.75 21v-8.25M8.25 21v-8.25M3 9l9-6 9 6m-1.5 12V10.332A48.36 48.36 0 0 0 12 9.75c-2.551 0-5.056.2-7.5.582V21M3 21h18M12 6.75h.008v.008H12V6.75Z"/>
-        </svg>
-      ),
-    },
-    {
-      name: 'GitHub',
-      href: 'https://github.com/SoraWebui/SoraWebui',
-      icon: (props) => (
-        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-          <path
-            fillRule="evenodd"
-            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-            clipRule="evenodd"
-          />
-        </svg>
-      ),
-    }
  ]
 }

 export default function Footer({
-                                  locale = '',
-                                  description=''
+                                 locale = '',
+                                 description=''
                               }) {
  return (
    <footer className="bg-[#020d24]" aria-labelledby="footer-heading">
@ -61,14 +35,6 @@ export default function Footer({
            <p className="text-sm text-gray-300">
              {description}
            </p>
-            <div className="flex space-x-6">
-              {navigation.social.map((item) => (
-                <a key={item.name} href={item.href} className="text-gray-500 hover:text-gray-400">
-                  <span className="sr-only">{item.name}</span>
-                  <item.icon className="h-6 w-6" aria-hidden="true"/>
-                </a>
-              ))}
-            </div>
          </div>
          <div className="mt-2 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
            <div className="md:grid md:grid-cols-2 md:gap-8">
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@ -10,6 +10,24 @@ import {useCommonContext} from '~/context/common-context'
 import LoadingModal from "./LoadingModal";
 import Image from "next/image";

+const navigation = {
+  social: [
+    {
+      name: 'GitHub',
+      href: 'https://github.com/SoraWebui/SoraWebui',
+      icon: (props) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    }
+  ]
+}
+
 export default function Header({
                                 locale = '',
                                 page = '',
@ -48,7 +66,7 @@ export default function Header({
      <nav className="mx-auto flex max-w-7xl items-center justify-between gap-x-6 p-4 lg:px-0" aria-label="Global">
        <div className="flex lg:flex-1">
          <a href={`/${locale}`} className="-m-1.5 p-1.5" onClick={() => setShowLoadingModal(true)}>
-            <Image className="h-8 w-auto" src="/appicon.svg" alt="Sorawebui.com" width={32} height={32}/>
+            <Image className="h-8 w-auto" src="/appicon.svg" alt="sorawebui.com" width={32} height={32}/>
          </a>
          <a href={`/${locale}`} className="-m-1.5 ml-0.5 p-1.5" onClick={() => setShowLoadingModal(true)}>
            <Image
@ -56,15 +74,23 @@ export default function Header({
              src="/sorawebui.svg"
              width={32}
              height={24}
-              alt=""/>
+              alt="sorawebui.com"/>
          </a>
        </div>
        <div className="flex flex-1 items-center justify-end gap-x-1">
+          <div className="flex space-x-6 mr-2">
+            {navigation.social.map((item) => (
+              <a key={item.name} href={item.href} className="text-gray-500 hover:text-gray-400">
+                <span className="sr-only">{item.name}</span>
+                <item.icon className="h-6 w-6" aria-hidden="true"/>
+              </a>
+            ))}
+          </div>
          <Menu as="div" className="relative inline-block text-left">
            <div>
              <Menu.Button
                className="inline-flex w-full justify-center gap-x-1.5 border border-[rgba(255,255,255,0.5)] rounded-md px-3 py-2 text-sm font-semibold text-white hover:border-[rgba(255,255,255,0.9)]">
-                <GlobeAltIcon className="w-5 h-5 text-white"/>{locale == 'default' ? 'EN': locale.toUpperCase()}
+                <GlobeAltIcon className="w-5 h-5 text-white"/>{locale == 'default' ? 'EN' : locale.toUpperCase()}
                <ChevronDownIcon className="-mr-1 h-5 w-5 text-white" aria-hidden="true"/>
              </Menu.Button>
            </div>