跳转评论

.cursorrules

@@ -0,0 +1 @@
+This chrome extension project use typescript, react, tailwindcss, daisyui.

.env.development

@@ -1 +1,3 @@
 VITE_ENV=web-dev
+VITE_EXTENSION_ID=bciglihaegkdhoogebcdblfhppoilclp
+VITE_REVIEW_URL=https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews

.env.production_chrome

@@ -1,3 +1,5 @@
 NODE_ENV=production
 
 VITE_ENV=chrome
+VITE_EXTENSION_ID=bciglihaegkdhoogebcdblfhppoilclp
+VITE_REVIEW_URL=https://chrome.google.com/webstore/detail/bciglihaegkdhoogebcdblfhppoilclp/reviews

.env.production_edge

@@ -0,0 +1,5 @@
+NODE_ENV=production
+
+VITE_ENV=edge
+VITE_EXTENSION_ID=lignnlhlpiefmcjkdkmfjdckhlaiajan
+VITE_REVIEW_URL=https://microsoftedge.microsoft.com/addons/detail/lignnlhlpiefmcjkdkmfjdckhlaiajan

package.json

@@ -7,9 +7,9 @@
   "main": "index.js",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build -m production_chrome",
-    "build_chrome": "pnpm run build && node fixChrome.cjs",
-    "build_firefox": "pnpm run build && node fixFirefox.cjs",
+    "build_chrome": "tsc && vite build -m production_chrome && node fixChrome.cjs",
+    "build_edge": "tsc && vite build -m production_edge && node fixChrome.cjs",
+    "build_firefox": "tsc && vite build -m production_chrome && node fixFirefox.cjs",
     "fix": "eslint --fix --quiet ."
   },
   "author": "IndieKKY",

src/biz/Body.tsx

@@ -38,6 +38,7 @@ import {openUrl} from '@kky002/kky-util'
 import useKeyService from '../hooks/useKeyService'
 import Ask from './Ask'
 import {v4} from 'uuid'
+import RateExtension from '../components/RateExtension'
 
 const Body = () => {
   const dispatch = useAppDispatch()
@@ -368,8 +369,8 @@ const Body = () => {
         {/*  </div> */}
         {/* </div> */}
       </div>
+      <div className='p-2'><RateExtension/></div>
     </div>
-
     {/* recommend */}
     {/* <div className='p-0.5' style={{ */}
     {/*  height: `${RECOMMEND_HEIGHT}px` */}

src/biz/Settings.tsx

@@ -1,5 +1,5 @@
 import React, {PropsWithChildren, useCallback, useMemo, useState} from 'react'
-import {setEnvData, setPage} from '../redux/envReducer'
+import {setEnvData, setPage, setTempData} from '../redux/envReducer'
 import {useAppDispatch, useAppSelector} from '../hooks/redux'
 import {
   ASK_ENABLED_DEFAULT,
@@ -408,6 +408,12 @@ const Settings = () => {
       <div className='flex justify-center gap-5'>
         <button className='btn btn-primary btn-sm' onClick={onSave}>保存</button>
         <button className='btn btn-sm' onClick={onCancel}>取消</button>
+        <button className='btn btn-sm' onClick={() => {
+          dispatch(setTempData({
+            reviewed: undefined,
+            // reviewActions: 0
+          }))
+        }}>重置</button>
       </div>
     </div>
   </div>

src/components/RateExtension.tsx

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import { FaStar } from 'react-icons/fa';
+import { IoMdClose } from 'react-icons/io';
+import { setTempData } from '../redux/envReducer';
+import { useAppDispatch, useAppSelector } from '../hooks/redux';
+import { openUrl } from '@kky002/kky-util';
+
+const RateExtension: React.FC = () => {
+  const dispatch = useAppDispatch()
+  const [isHovered, setIsHovered] = useState(false);
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+
+  const handleRateClick = () => {
+    dispatch(setTempData({
+      reviewed: true
+    }))
+    // Chrome Web Store URL for your extension
+    openUrl(import.meta.env.VITE_REVIEW_URL)
+  };
+
+  if (reviewed === true || reviewed === undefined) return null;
+
+  return (
+    <div className="relative bg-gradient-to-r from-primary to-secondary text-primary-content p-4 rounded-lg shadow-lg text-sm transition-all duration-300 ease-in-out hover:shadow-xl">
+      <button
+        onClick={() => {
+          dispatch(setTempData({
+            reviewed: true
+          }))
+        }}
+        className="absolute top-2 right-2 text-primary-content opacity-70 hover:opacity-100 transition-opacity"
+      >
+        <IoMdClose size={20} />
+      </button>
+      <h3 className="text-lg font-bold mb-2 animate-pulse">喜欢这个扩展吗？</h3>
+      <p className="mb-3">如果觉得有用，请给我们评分！</p>
+      <button
+        onClick={handleRateClick}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+        className="btn btn-accent btn-sm gap-2 transition-all duration-300 ease-in-out hover:scale-105"
+      >
+        <FaStar className={`inline-block text-yellow-300 ${isHovered ? 'animate-spin' : ''}`} />
+        去评分
+        <span className="transition-transform duration-300 ease-in-out transform inline-block">
+          {isHovered ? '🚀' : '→'}
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default RateExtension;

src/hooks/useSubtitle.ts

@@ -1,13 +1,24 @@
-import {useAppDispatch} from './redux'
+import {useAppDispatch, useAppSelector} from './redux'
 import React, {useCallback} from 'react'
-import {setNeedScroll} from '../redux/envReducer'
+import {setNeedScroll, setReviewAction, setTempData} from '../redux/envReducer'
 
 const useSubtitle = () => {
   const dispatch = useAppDispatch()
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+  const reviewAction = useAppSelector(state => state.env.reviewAction)
+  const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
 
   const move = useCallback((time: number, togglePause: boolean) => {
     window.parent.postMessage({type: 'move', time, togglePause}, '*')
-  }, [])
+
+    //review action
+    if (reviewed === undefined && !reviewAction) {
+      dispatch(setReviewAction(true))
+      dispatch(setTempData({
+        reviewActions: (reviewActions ?? 0) + 1
+      }))
+    }
+  }, [dispatch, reviewAction, reviewActions, reviewed])
 
   const scrollIntoView = useCallback((ref: React.RefObject<HTMLDivElement>) => {
     ref.current?.scrollIntoView({behavior: 'smooth', block: 'center'})

src/hooks/useSubtitleService.ts

@@ -13,6 +13,7 @@ import {
   setTitle,
   setTotalHeight,
   setUrl,
+  setTempData,
 } from '../redux/envReducer'
 import {EventBusContext} from '../Router'
 import {EVENT_EXPAND, GEMINI_TOKENS, TOTAL_HEIGHT_MAX, TOTAL_HEIGHT_MIN, WORDS_MIN, WORDS_RATE} from '../const'
@@ -39,6 +40,17 @@ const useSubtitleService = () => {
   const transResults = useAppSelector(state => state.env.transResults)
   const hideOnDisableAutoTranslate = useAppSelector(state => state.env.envData.hideOnDisableAutoTranslate)
   const autoTranslate = useAppSelector(state => state.env.autoTranslate)
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+  const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
+
+  //如果reviewActions达到15次，则设置reviewed为false
+  useEffect(() => {
+    if (reviewed === undefined && reviewActions && reviewActions >= 3) {
+      dispatch(setTempData({
+        reviewed: false
+      }))
+    }
+  }, [reviewActions, dispatch, reviewed])
 
   // 监听消息
   useEffect(() => {

src/hooks/useTranslate.ts

@@ -9,7 +9,9 @@ import {
   setLastTransTime,
   setSummaryContent,
   setSummaryError,
-  setSummaryStatus
+  setSummaryStatus,
+  setReviewAction,
+  setTempData
 } from '../redux/envReducer'
 import {
   LANGUAGE_DEFAULT,
@@ -38,6 +40,9 @@ const useTranslate = () => {
   const language = LANGUAGES_MAP[envData.language??LANGUAGE_DEFAULT]
   const summarizeLanguage = LANGUAGES_MAP[envData.summarizeLanguage??SUMMARIZE_LANGUAGE_DEFAULT]
   const title = useAppSelector(state => state.env.title)
+  const reviewed = useAppSelector(state => state.env.tempData.reviewed)
+  const reviewAction = useAppSelector(state => state.env.reviewAction)
+  const reviewActions = useAppSelector(state => state.env.tempData.reviewActions)
 
   /**
    * 获取下一个需要翻译的行
@@ -137,6 +142,14 @@ const useTranslate = () => {
   }, [data?.body, envData, language.name, title, dispatch])
 
   const addSummarizeTask = useCallback(async (type: SummaryType, segment: Segment) => {
+    //review action
+    if (reviewed === undefined && !reviewAction) {
+      dispatch(setReviewAction(true))
+      dispatch(setTempData({
+        reviewActions: (reviewActions ?? 0) + 1
+      }))
+    }
+
     if (segment.text.length >= SUMMARIZE_THRESHOLD) {
       let subtitles = ''
       for (const item of segment.items) {

src/redux/envReducer.ts

@@ -48,6 +48,9 @@ interface EnvState {
 
   searchText: string
   searchResult: Set<number>
+
+  //当前视频是否计算过操作
+  reviewAction: boolean
 }
 
 const initialState: EnvState = {
@@ -77,6 +80,8 @@ const initialState: EnvState = {
   searchResult: new Set(),
 
   asks: [],
+
+  reviewAction: false,
 }
 
 export const slice = createSlice({
@@ -98,6 +103,9 @@ export const slice = createSlice({
         ...action.payload,
       }
     },
+    setReviewAction: (state, action: PayloadAction<boolean>) => {
+      state.reviewAction = action.payload
+    },
     setTempReady: (state) => {
       state.tempReady = true
     },
@@ -319,6 +327,7 @@ export const {
   setAutoTranslate,
   setAutoScroll,
   setNoVideo,
+  setReviewAction,
   setNeedScroll,
   setCurIdx,
   setEnvData,

src/typings.d.ts

@@ -40,6 +40,8 @@ interface TempData {
   curSummaryType: SummaryType
   downloadType?: string
   compact?: boolean // 是否紧凑视图
+  reviewActions?: number // 点击或总结行为达到一定次数后，显示评分（一个视频最多只加1次）
+  reviewed?: boolean // 是否点击过评分,undefined: 不显示；true: 已点击；false: 未点击(需要显示)
 }
 
 interface TaskDef {

src/vite-env.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
+  readonly VITE_REVIEW_URL: string
+  readonly VITE_EXTENSION_ID: string
 }
 
 interface ImportMeta {

vite.config.ts

@@ -12,7 +12,7 @@ export default ({mode}) => {
     visualizer() as PluginOption,
   ]
   // @ts-ignore
-  if (mode === 'production_chrome') {
+  if (mode === 'production_chrome' || mode === 'production_edge') {
     plugins.push(crx({
       manifest,
     }))