CMS2.0: EFV CMS transformed with over 100 refinements, 3000 lines of code and 40 hours of work

The built-in CMS of EFV began as a static presentation frontend without extensive planning. As transcoding became more powerful, the CMS fell behind the core. During May's Labor Day period, I spent nearly 40 hours rewriting the CMS. There are at least a hundred refinements across CMS templates, CMS settings, series and video management. Here is what changed in the CMS.

CMS2.0 design

Easy to use, efficient, fast and ready to operate, with minimal JS and CSS. Every page—home, category, tag, playback, account and search—uses masonry layouts and infinite loading to improve engagement while preserving good SEO.

Selected refinements

• One: The rewritten projectx template uses uikit with few third-party libraries, loading only 5 CSS and JS files for speed.
• Two: Navigation is thoroughly improved. Good navigation is central to frontend design.
• Three: PC navigation adds access to all categories and tags.

Four: Mobile top navigation adds a persistent shortcut menu, reaching destinations from any page.

Five: Redesigned sliding mobile navigation includes categories, tags and common links, allowing one-tap navigation.

Six: Every aggregation page now uses masonry. All data types gain poster 2, generated automatically during poster uploads with width and height recorded. The API exposes these for masonry APP development; a dedicated infinite-masonry EFV APP will follow.

• Seven: Rewrote cloud-storage synchronization with upload retries and better workflow. A standalone synchronization subsystem for the CMS runs separately without affecting the main application. Configure watched folders, file types, post-upload deletion and extensions excluded from deletion. It supports wasabi, s3, minio, Alibaba OSS, Qiniu, Upyun and most major services. Details: https://express-ffmpeg-vip.moejj.com/blog/5ec4a5d0e84cb5c0e1a32845.
• Eight: Added configurable preview duration. Administrators choose the seconds available to users without permission. Fixed resolution ordering and portrait players expanding the page, and improved playback-page speed.
• Nine: Fixed an ffmpeg community BUG where screen recordings failed to transcode because keyframe intervals were too large, resolving this BUG.
• Ten: Changed point pricing from currency per point to points per currency unit. Previously one point cost at least one yuan; now one yuan can buy 10 points. This makes check-in, referral and upload rewards, viewing and download permissions more flexible. Minimum point purchases become a minimum monetary spend.
• Eleven: Real-time downloadable mp4 files have random names, with download and downloadprice fields on movie. No retained MP4 is required: a new API assembles mp4 from m3u8 when no download mp4 exists, returns it and caches its download field. Later requests return that file directly. Details: https://express-ffmpeg-vip.moejj.com/blog/5ebf6daee84cb5c0e1a32844.
• Twelve: Added download permissions purchased with points and limited by duration. The CMS supports point-based video downloads, with configurable default price and duration and per-video prices. Downloads are unlimited within the permission period; afterward, permission must be purchased again. See the previous link for details.
• Thirteen: The fluent API generates a selected video's MP4 resolution in real time and returns path. FluentAPI is a core future value of EFV: api calls will handle transcoding, slicing, screenshots, animations and previews, making EFV a transcoding SAAS. The first Fluent API accepts apikey, apisecret, id and hd, locates the video by ID, assembles mp4 from the m3u8 at the resolution specified by hd and returns path for further handling through that path.
• Fourteen: Added user point-purchase and spending records so administrators see all transactions.
• Fifteen: Separated live streaming as the second subsystem. Users who need it can start it in one action; others no longer run it unnecessarily.
• Sixteen: projectx supports series, films, articles and galleries/comics. Audio and live streaming will follow.
• Seventeen: Custom CMS navigation through navbar.js in config, automatically loaded by projectx. Example:

module.exports = {
    navbar: [{
        title: '热门视频',
        href: '/hots'
    }, {
        title: '试试手气',
        href: '/random'
    }, {
        title: '资讯',
        href: '/articles'
    } , {
        title: '图集漫画',
        href: '/imageslist'
    } , {
        title: '发现更多',
        href: '/discover'
    }]
}

This configuration appears in PC, persistent mobile shortcut and sliding navigation.

• Eighteen: Real-time transcoding progress in administration, separately for each resolution, implemented with socketio. Video: https://www.leimulamu.com/movie/5ec4dcf131ec047e1d7686ed.
• Nineteen: The selected playback resolution is recorded and becomes the default for subsequent videos.
• Twenty: Playback position is recorded by video ID. Reopening, refreshing or switching resolution resumes at the stored position.
• Twenty-one: Configure referral point rewards. Points are available through daily check-ins, referrals, uploads and purchases, working well with the new points-per-yuan pricing.
• Twenty-two: Added multiple daily check-in buttons to the template, encouraging daily visits.
• Twenty-three: Added direct VIP group purchases. Previously users bought points and then a VIP group; now they can buy a VIP group directly while retaining point purchases.
• Twenty-four: Animated previews now intelligently capture the video's midpoint rather than a fixed start time. Fixed start times beyond a video's duration previously produced no animation.
• Twenty-five: Added a formal Publish button for series. Newly created series without episodes could cause frontend errors; now add episodes before publishing for explicit control.

Conclusion

One post cannot describe all the work of these 20 days. Try it at https://www.leimulamu.com.