Category: computer science

If you find that your Clash Verge + Proxifier setup only proxies part of your traffic, double-check whether the port opened from Clash Verge to Proxifier is set to Mixed Port or another type. If it is not set to Mixed Port, change it to Mixed Port, and it should work.

This issue can occur with VS Code and GitHub VS Code.

On the other hand, for VS Code and Docker, if you are using Proxifier, please change your “localhost” proxy rule to Direct instead of Proxy.

In your browser’s console, run the following JavaScript code. All videos (elements with <video> tags) will be set to loop automatically.

CODES:

// Script to make all videos on the page loop
(function() {
    // First, handle standard HTML5 video elements
    const videos = document.querySelectorAll('video');
    videos.forEach(video => {
        // Set native loop attribute
        video.loop = true;
        console.log('Set native loop for video:', video);
        
        // Add ended event listener as a fallback
        video.addEventListener('ended', function() {
            this.currentTime = 0;
            this.play();
            console.log('Restarted video via event listener');
        });
    });
    
    // Handle Plyr instances specifically
    if (window.Plyr) {
        console.log('Plyr detected, configuring all instances');
        document.querySelectorAll('.plyr').forEach(plyrElement => {
            const plyrInstance = plyrElement.plyr;
            if (plyrInstance) {
                plyrInstance.loop = true;
                console.log('Set loop for Plyr instance:', plyrInstance);
            }
        });
    } else {
        console.log('No Plyr global object found, checking for individual instances');
        // Try to find Plyr instances attached to DOM elements
        document.querySelectorAll('.plyr').forEach(plyrElement => {
            // Look for plyr data in the element
            const video = plyrElement.querySelector('video');
            if (video) {
                video.loop = true;
                console.log('Set loop on video within Plyr container');
            }
        });
    }
    
    console.log('✅ Loop enabled for all videos on page');
    return `Modified ${videos.length} video elements`;
})();

Create components for specific hooks

If there are some special hooks were used, for example useSearchParams(), wrap it as a component, using suspense to load it. Ex:

import { Suspense } from 'react';
import ChatComponent from './ChatComponent';

export default function Page() {
 return (
  <div className="font-sans max-w-3xl mx-auto p-5">
    <h1 className="text-2xl font-bold mb-4 text-center">Yidam Chat</h1>
    <Suspense fallback={<div>Loading chat...</div>}>
     <ChatComponent />
    </Suspense>
  </div>
 );
}

Set next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
 /* config options here */
 reactStrictMode: true,
 output: 'export',
 basePath: '/web',
};

export default nextConfig;

Notes

• Set output: 'export' for npm run build
• Set basePath: '/web' for the sub-directory of the web root

Set package.json

 "scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
 },

Notes: just keep as it was

Run command to generate files

npm run build

(Optional) Rust web server setting

use axum::{
  routing::{get, get_service},
  Router,
};

async fn main() {
  let state = Arc::new(AppState {
    context: Mutex::new(Vec::new()),
  });

  let app = Router::new()
  .route("/ws", get(websocket_handler))
  .nest_service("/web", get_service(ServeDir::new("./src/web")))
  .with_state(state);
  const PORT: u16 = 3001;
  // get lan ip
  let listener = tokio::net::TcpListener::bind(format!("0.0.0.0:{}", PORT)).await.unwrap();
  println!("Please open http://{}:{}/web", get_local_ip().unwrap(), PORT);
  axum::serve(listener, app).await.unwrap();
}

From last Thursday until just now (Saturday), two issues confused me a lot:

forEach is synchronous, not asynchronous

This is a fundamental concept, but problems can arise when you assume a block of code will execute synchronously while using forEach. For some reason, if that block of code becomes asynchronous, it could lead to unexpected issues.

slice creates a shallow copy

shortConversation = […systemPrompt, …chatThread.current.slice(-(memoryLength + 2 - 1))];

The slice method causes shortConversation and chatThread to share part of the memory, which led to unexpected behaviors.

The corrected code is as follows:

shortConversation = [...systemPrompt, ...structuredClone(chatThread.current.slice(-(memoryLength + 2 - 1)))];

Using structuredClone ensures that shortConversation and chatThread are completely independent.