Modernizing Code with xFactor

Introduction

The Fieldtrip Project, an NIH-sponsored website, was created to engage adolescents with educational content by inviting them to watch short films and participate in an online community. Researchers aimed to spur meaningful discussions and encourage adolescents to share their thoughts on education and identity development.

A key component of this online environment was the Flash-based video player, which enabled users to watch short films and log their activity. However, as Flash support gradually phased out across modern browsers, the project faced the risk of losing its most critical features—particularly video playback and research logging.

Original Flash-Based Development Environment

Original Flash ActionScript

import flash.geom.ColorTransform;
import flash.utils.*;
import fl.video.*;
import flash.text.*;
import flash.external.ExternalInterface;
import flash.display.Sprite;  
import flash.display.Loader;  
import flash.net.URLRequest;

stop();

var videoDown:Boolean = false;
var oldVolume:Number = 1;
var started:Boolean = false;
var muted:Boolean = false;
var videoTimer:Timer = new Timer(250, 1);
var mouseTimer:Timer = new Timer(1750, 1);
var dragVolume:Boolean = false;
var volumeUp:Boolean = false;
var percentage:Number;
var volumePercent:Number = 1;
var idle:Boolean = false;
var xmlNavData:XML;
var filename:String;

init();

function init()
{
    loading.x = stage.stageWidth/2 - loading.width/2;
    loading.y = stage.stageHeight/2 - loading.height/2;
    video.videoButtons.hitArea.width = stage.stageWidth;
    video.videoButtons.hitArea.height = stage.stageHeight;
    video.videoButtons.timeDisplay.mouseEnabled=false;
    video.videoButtons.timeDisplay.blendMode = BlendMode.LAYER;
    video.videoButtons.volumeButton.slider.sliderBG.mouseEnabled=false;
    video.videoButtons.volumeButton.slider.bg.alpha = .5;
    video.videoButtons.videoTimeline.alpha = .5;
    video.videoButtons.volumeButton.slider.bg.y = 0;
    video.videoButtons.shine.mouseEnabled=false;
    video.videoButtons.volumeButton.mute.icon.gotoAndStop(101);
    video.videoButtons.volumeButton.mute.icon.mouseEnabled=false;
    video.videoButtons.videoTimeline.timelineLines.mouseEnabled=false;
    video.videoButtons.videoTimeline.y = stage.stageHeight - 40;
    video.videoButtons.volumeButton.x = stage.stageWidth - 60;
    video.videoButtons.volumeButton.y = stage.stageHeight - 40;
    video.videoButtons.videoTimeline.width = stage.stageWidth;
    video.videoButtons.videoTimeline.timelineLines.width = stage.stageWidth - 60;
    video.videoButtons.playPauseButton.x = stage.stageWidth/2;
    video.videoButtons.playPauseButton.y = stage.stageHeight/2;
    video.flvPlayer.height = stage.stageHeight;
    video.flvPlayer.width = stage.stageWidth;
    video.flvPlayer.scaleMode = VideoScaleMode.EXACT_FIT;
    video.videoButtons.timeDisplay.y = stage.stageHeight - 20 - (video.videoButtons.timeDisplay.height/2);
    video.videoButtons.timeDisplay.x = stage.stageWidth - 60 - video.videoButtons.timeDisplay.width;
    mouseTimeDisplay.y = stage.stageHeight;
    GetNavigateTo();
}

function loadVideo()
{
    video.alpha = 0;
    video.flvPlayer.visible = false;
    video.videoButtons.playPauseButton.gotoAndStop(1);
    video.videoButtons.videoTimeline.played.width = 0;
    video.videoButtons.videoTimeline.loaded.width = 0;

    var loader:Loader = new Loader();
    video.flvPlayer.source = "videos/" + filename + ".flv";
    loader.load(new URLRequest("videos/" + filename + ".png"));
    video.poster.addChild(loader);
    video.poster.alpha = 1;

    video.flvPlayer.addEventListener(VideoEvent.COMPLETE, videoComplete);
    addEventListener(Event.ENTER_FRAME, videoUpdater);
    video.videoButtons.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OVER));
    video.flvPlayer.addEventListener(VideoEvent.READY, videoReady);
}

function videoReady(e:VideoEvent)
{
    enableVideoButtons();
    startVideo()
}

function startVideo()
{
    video.flvPlayer.removeEventListener(VideoEvent.READY, videoReady);
}

function unloadVideo()
{
    mouseTimeDisplay.visible=false;
    video.flvPlayer.pause();
    removeEventListener(Event.ENTER_FRAME, videoUpdater);
    disableVideoButtons();
    video.flvPlayer.removeEventListener(VideoEvent.COMPLETE, videoComplete);
}

function timelineClick(e:MouseEvent)
{
    video.flvPlayer.seek((mouseX) / (stage.stageWidth - 60) * video.flvPlayer.totalTime);
    video.flvPlayer.addEventListener(VideoEvent.SEEKED, loadingOff);
}

function loadingOff(e:VideoEvent)
{
    if(video.poster.alpha > 0)
    {
        video.flvPlayer.visible=true;
    }
    TweenMax.to(video.videoButtons.loading, .25, {alpha:0});
    video.flvPlayer.removeEventListener(VideoEvent.SEEKED, loadingOff);
}

function videoComplete(e:VideoEvent)
{
    video.flvPlayer.pause();
    videoOver();
    video.videoButtons.playPauseButton.gotoAndStop(1);
    videoTimer.removeEventListener(TimerEvent.TIMER, hideVideoControls);
    mouseTimer.removeEventListener(TimerEvent.TIMER, triggerMouseTimer);
}

function rewind()
{
    video.flvPlayer.seek(0);
}

function playPause(e:MouseEvent)
{
    if(mouseY < video.videoButtons.videoTimeline.y && video.alpha > .5)
    {
        video.flvPlayer.visible=true;
        if(video.flvPlayer.state == "playing")
        {
            video.videoButtons.playPauseButton.gotoAndStop(1);
            video.flvPlayer.pause();
            videoTimer.removeEventListener(TimerEvent.TIMER, hideVideoControls);
            mouseTimer.removeEventListener(TimerEvent.TIMER, triggerMouseTimer);
        }
        else if(video.flvPlayer.state == "paused" || video.flvPlayer.state == "stopped" || video.flvPlayer.state == "seeking")
        {
            video.videoButtons.playPauseButton.gotoAndStop(2);
            video.flvPlayer.play();
            videoTimer.addEventListener(TimerEvent.TIMER, hideVideoControls);
            mouseTimer.addEventListener(TimerEvent.TIMER, triggerMouseTimer);
            addEventListener(MouseEvent.MOUSE_MOVE, resetMouseTimer);
            mouseTimer.reset();
            mouseTimer.start();
        }
    }
}

function volumeOver(e:MouseEvent)
{
    if(!dragVolume && !videoDown)
    {
        volumeUp=true;
        video.videoButtons.removeEventListener(MouseEvent.CLICK, playPause);
        video.videoButtons.volumeButton.slider.bar.addEventListener(MouseEvent.MOUSE_DOWN, dragVolumeBar);
    }
}

function volumeOut(e:MouseEvent)
{
    if(!dragVolume)
    {
        volumeUp=false;
        video.videoButtons.addEventListener(MouseEvent.CLICK, playPause);
    }
}

function volumeClick(e:MouseEvent)
{
    var target = (mouseY - stage.stageHeight+140) * .95

    if(target < 15)
        target = 15;
    if(target >= 85)
    {
        target = 85;
        muted=true;
    }
    else
    {
        muted=false;
    }
}

function setOldVolume()
{
    oldVolume = video.flvPlayer.volume;
}

function updateVolumeBar()
{
    video.videoButtons.volumeButton.slider.bar.y = video.videoButtons.volumeButton.slider.sliderBG.y + (Math.abs(1-volumePercent) * video.videoButtons.volumeButton.slider.sliderBG.height);
}

function mute(e:MouseEvent)
{
    if(!muted)
    {
        muted = true;   
    }
    else
    {
        muted = false;
    }
}

function updateVolume()
{
    volumePercent = Math.abs(1-(video.videoButtons.volumeButton.slider.bar.y - video.videoButtons.volumeButton.slider.sliderBG.y) / video.videoButtons.volumeButton.slider.sliderBG.height);
    video.flvPlayer.volume = volumePercent;
    video.videoButtons.volumeButton.mute.icon.gotoAndStop(Math.floor(volumePercent*100-1));
}

function dragVolumeBar(e:MouseEvent)
{
    dragVolume = true;
    video.videoButtons.volumeButton.slider.bg.removeEventListener(MouseEvent.MOUSE_OUT, volumeOut);
    var rect:Rectangle = new Rectangle(video.videoButtons.volumeButton.slider.sliderBG.x, video.videoButtons.volumeButton.slider.sliderBG.y, 0, video.videoButtons.volumeButton.slider.sliderBG.height);
    video.videoButtons.volumeButton.slider.bar.startDrag(false, rect);

    addEventListener(MouseEvent.MOUSE_UP, stopDragVolumeBar);
    addEventListener(MouseEvent.MOUSE_MOVE, draggingVolumeBar);
}

function stopDragVolumeBar(e:MouseEvent)
{
    dragVolume=false;
    video.videoButtons.volumeButton.slider.bar.stopDrag();
    video.videoButtons.volumeButton.addEventListener(MouseEvent.MOUSE_OUT, volumeOut);

    removeEventListener(MouseEvent.MOUSE_UP, stopDragVolumeBar);
    removeEventListener(MouseEvent.MOUSE_MOVE, draggingVolumeBar);
    video.videoButtons.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));
    if(volumePercent > 0)
    {
        setOldVolume()
        muted=false;
    }
    else
        muted=true;
}

function draggingVolumeBar(e:MouseEvent)
{
    volumePercent = Math.abs(1-((video.videoButtons.volumeButton.slider.bar.y - video.videoButtons.volumeButton.slider.sliderBG.y) / video.videoButtons.volumeButton.slider.sliderBG.height));
    video.flvPlayer.volume = volumePercent;
    video.videoButtons.volumeButton.mute.icon.gotoAndStop(Math.floor(volumePercent*100-1));
}

function triggerMouseTimer(e:TimerEvent)
{
    idle=true;
    videoTimer.reset();
    videoTimer.start();
}

function videoOver()
{
    Mouse.show();
}

function videoOut()
{
    videoTimer.reset();
    videoTimer.start();
}

function videoDownFalse()
{
    videoDown=false;
}

function hideVideoControls(e:TimerEvent)
{
    if(video.flvPlayer.state == "playing" && !volumeUp)
    {
        videoDown=true;
        mouseTimer.removeEventListener(TimerEvent.TIMER, triggerMouseTimer);
        Mouse.hide();
    }
}

function videoUpdater(e:Event)
{
    var total:Number = video.flvPlayer.totalTime;
    var playhead:Number = video.flvPlayer.playheadTime;

    //TOTAL TIME
    var Ttime:Number = Math.floor(Number(video.flvPlayer.totalTime));
    var minutes:Number = Math.floor(Ttime/60);
    var seconds = Math.floor(Ttime%60);
    if (seconds<10)
        seconds = ("0"+seconds);

    //CURRENT PLAYING TIME
    var Ttime2:Number = Math.floor(Number(video.flvPlayer.playheadTime));
    var minutes2:Number = Math.floor(Ttime2/60);
    var seconds2 = Math.floor(Ttime2%60);
    if (seconds2<10)
        seconds2 = ("0"+seconds2);

    if(mouseY > stage.stageHeight - 40 && mouseY < stage.stageHeight && mouseX < stage.stageWidth - 60 && !dragVolume && video.videoButtons.videoTimeline.y == stage.stageHeight - 40)
    {
        if(!mouseTimeDisplay.visible)
        {
            mouseTimeDisplay.visible=true;
        }

        var Ttime3:Number;

        Ttime3 = Math.floor((mouseX) / (stage.stageWidth - 60) * video.flvPlayer.totalTime);

        var minutes3:Number = Math.floor(Ttime3/60);
        var seconds3 = Math.floor(Ttime3%60);
        if (seconds3<10)
            seconds3 = ("0"+seconds3);

        mouseTimeDisplay.display.text = minutes3 + ":" + seconds3;
        mouseTimeDisplay.display.autoSize = "center";

        mouseTimeDisplay.scaleX = 1;
        mouseTimeDisplay.scaleY = 1;
        mouseTimeDisplay.x = mouseX;

        if(mouseTimeDisplay.x -(mouseTimeDisplay.display.width/2) <= 0)
            mouseTimeDisplay.display.x = -(mouseTimeDisplay.display.width/2) + (video.x - mouseTimeDisplay.x + mouseTimeDisplay.display.width/2);
        else
            mouseTimeDisplay.display.x = -(mouseTimeDisplay.display.width/2);
    }
    else
        mouseTimeDisplay.visible=false;

    video.videoButtons.videoTimeline.loaded.width = video.flvPlayer.bytesLoaded / video.flvPlayer.bytesTotal * (stage.stageWidth -60);
    video.videoButtons.videoTimeline.played.width = video.flvPlayer.playheadTime / video.flvPlayer.totalTime * (stage.stageWidth -60);
    video.videoButtons.timeDisplay.text =  minutes2 + ":" + seconds2 + " / " + minutes + ":" + seconds;

    if(mouseX < video.x || mouseX > video.x + video.width || mouseY < 0 || mouseY > video.height)
    {
        if(video.flvPlayer.state == "playing" && !dragVolume && !videoTimer.running && !TweenMax.isTweening(video.videoButtons.playPauseButton))
        {
            videoOut();
        }
    }
    else
    {
        if(!idle)
            videoOver();
    }
}

function resetMouseTimer(e:MouseEvent)
{
    idle=false;
    mouseTimer.addEventListener(TimerEvent.TIMER, triggerMouseTimer);
    mouseTimer.reset();
    mouseTimer.start();
}

function enableVideoButtons()
{
    video.videoButtons.addEventListener(MouseEvent.CLICK, playPause);
    video.videoButtons.volumeButton.addEventListener(MouseEvent.MOUSE_OVER, volumeOver);
    video.videoButtons.volumeButton.addEventListener(MouseEvent.MOUSE_OUT, volumeOut);
    video.videoButtons.volumeButton.mute.addEventListener(MouseEvent.CLICK, mute);
    video.videoButtons.volumeButton.slider.bar.addEventListener(MouseEvent.MOUSE_OVER, volumeOver);
    video.videoButtons.volumeButton.slider.bar.addEventListener(MouseEvent.MOUSE_OUT, volumeOut);
    video.videoButtons.volumeButton.slider.bg.addEventListener(MouseEvent.CLICK, volumeClick);
    video.videoButtons.videoTimeline.addEventListener(MouseEvent.CLICK, timelineClick);
    video.videoButtons.dispatchEvent(new MouseEvent(MouseEvent.MOUSE_OUT));
}

function disableVideoButtons()
{
    video.videoButtons.removeEventListener(MouseEvent.CLICK, playPause);
    video.videoButtons.volumeButton.removeEventListener(MouseEvent.MOUSE_OVER, volumeOver);
    video.videoButtons.volumeButton.removeEventListener(MouseEvent.MOUSE_OUT, volumeOut);
    video.videoButtons.volumeButton.mute.removeEventListener(MouseEvent.CLICK, mute);
    video.videoButtons.volumeButton.slider.bar.removeEventListener(MouseEvent.MOUSE_OVER, volumeOver);
    video.videoButtons.volumeButton.slider.bar.removeEventListener(MouseEvent.MOUSE_OUT, volumeOut);
    video.videoButtons.volumeButton.slider.bg.removeEventListener(MouseEvent.CLICK, volumeClick);
    video.videoButtons.videoTimeline.removeEventListener(MouseEvent.CLICK, timelineClick);
}

function GetNavigateTo():void
{
    var xmlURLReqGetNavigate:URLRequest = new URLRequest("Filename.xml");
    xmlURLReqGetNavigate.method = URLRequestMethod.POST;
    var xmlGetNav:URLLoader = new URLLoader();
    xmlGetNav.addEventListener(Event.COMPLETE, onCompleteGetNavigateTo, false, 0, true);
    xmlGetNav.addEventListener(IOErrorEvent.IO_ERROR, noNavigateTo, false, 0, true);
    xmlGetNav.load(xmlURLReqGetNavigate); //get navigate to
}

function onCompleteGetNavigateTo(e:Event):void
{
    try
    {
        // Sample XML structure:
        // 
        //     
        //         test
        //     
        // 
        xmlNavData = new XML(e.target.data);
        var userXML  = xmlNavData.navigate[0];
        if(userXML.navigateTo.toString()  != "")
            filename = userXML.navigateTo.text(); 
        else
            filename = "test";
    }
    catch (err:TypeError)
    {
        filename = "test"
    }
    removeEventListener(Event.COMPLETE, onCompleteGetNavigateTo);
    loadVideo();
}

function noNavigateTo(e:Event):void //So we can test offline
{
    removeEventListener(Event.COMPLETE, onCompleteGetNavigateTo);
    removeEventListener(IOErrorEvent.IO_ERROR, noNavigateTo);
    filename = "test";
    loadVideo();
}

The Refactoring Journey

With the gradual obsolescence of Flash, there was the need for a modern approach to preserve video playback and data logging. This strategy involved converting the Flash ActionScript solution into a fully functional HTML5/JavaScript player— capable of maintaining the same interactions while improving security and compatibility.

xFactor with imported code

xFactor is Devis' airgapped, AI-driven solution for full-stack development, system innovation, and secure refactoring of legacy applications. This platform leverages advanced AI technologies and custom Large Language Models (LLMs) to streamline every stage of development—from initial architecture and design to implementation and deployment—enabling organizations to build scalable, secure, and future-ready systems. By working on airgapped networks and employing advanced security measures, xFactor preserves data integrity and operational continuity even in sensitive environments. Development InfoStructure, LLC (Devis) proudly introduces xFactor as a state-of-the-art platform designed to transform Full-Stack Development and System Creation. It automates code conversion between languages to ensure accurate, context-aware translations and supports secure legacy application lift-and-shift operations, particularly on SIPRNet. Leveraging an airgapped network of LLMs, including custom Precision Language Models (PLMs), xFactor employs genetic algorithms and ensemble techniques to evaluate and refactor extensive codebases with improved precision, enhancing its effectiveness in code assessment and transformation.

Initial refactoring prompt

xFactor was used to modernize this Flash code. After importing the code, an instruction to transform the Flash code into an HTML5-based video player. This prompt established that the resulting player must maintain the same functionality—especially its logging capability—and simply replace the video source with a modern URL.

"Refactor the provided Flash code into an HTML5 video player page using JavaScript and CSS. Ensure the refactored code maintains the same functionality and behavior as the original Flash code, including the logging functionality which should be displayed below the video player. Replace the existing video source with the video from the URL - https://genitive.ai/wp-content/uploads/2025/01/xFactor-Refactoring.mp4"

Initial Code Generation

xFactor's initial code generation produced a straightforward HTML5 structure for the video player, providing the essential skeleton for playback, controls, and logging. Below is the first draft of the refactored code that replaced the Flash interface.

View Initial Code Generation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Player</title>
    <style>
        #video-container {
            width: 640px;
            height: 480px;
            border: 1px solid black;
            position: relative;
        }
        
        #video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            box-sizing: border-box;
        }
        
        #logging-display {
            position: absolute;
            bottom: -150px;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: scroll;
            height: 140px;
        }
    </style>
</head>
<body>
    <div id="video-container">
        <video id="video" width="640" height="480"></video>
        <div id="video-controls">
            <button id="play-pause-button">Play/Pause</button>
            <input id="volume-slider" type="range" min="0" max="1" value="1" step="0.01">
            <span id="time-display">00:00 / 00:00</span>
        </div>
        <div id="logging-display"></div>
    </div>

    <script>
        const video = document.getElementById('video');
        const playPauseButton = document.getElementById('play-pause-button');
        const volumeSlider = document.getElementById('volume-slider');
        const timeDisplay = document.getElementById('time-display');
        const loggingDisplay = document.getElementById('logging-display');

        let videoPlaying = false;
        let volumeLevel = 1;
        let muted = false;
        let idle = false;
        let videoDuration = 0;
        let videoCurrentTime = 0;

        // Set the video source URL
        video.src = 'https://genitive.ai/wp-content/uploads/2025/01/xFactor-Refactoring.mp4';

        // On canplay, get the video's duration and start playing automatically
        video.addEventListener('canplay', () => {
            videoDuration = video.duration;
            video.play();
            videoPlaying = true;
        });

        // Update the current time display during playback
        video.addEventListener('timeupdate', () => {
            videoCurrentTime = video.currentTime;
            updateTimeDisplay();
        });

        // When the video ends, reset states
        video.addEventListener('ended', () => {
            videoPlaying = false;
            playPauseButton.textContent = 'Play';
        });

        // Handle the Play/Pause button clicks
        playPauseButton.addEventListener('click', () => {
            if (videoPlaying) {
                video.pause();
                videoPlaying = false;
                playPauseButton.textContent = 'Play';
            } else {
                video.play();
                videoPlaying = true;
                playPauseButton.textContent = 'Pause';
            }
        });

        // Listen for volume slider changes
        volumeSlider.addEventListener('input', () => {
            volumeLevel = volumeSlider.value;
            video.volume = volumeLevel;

            muted = (volumeLevel === '0');
        });

        // Format the time display
        function updateTimeDisplay() {
            const minutes = Math.floor(videoCurrentTime / 60);
            const seconds = Math.floor(videoCurrentTime % 60);
            const durationMinutes = Math.floor(videoDuration / 60);
            const durationSeconds = Math.floor(videoDuration % 60);

            timeDisplay.textContent = `${padZero(minutes)}:${padZero(seconds)} / ${padZero(durationMinutes)}:${padZero(durationSeconds)}`;
        }

        function padZero(number) {
            return (number < 10 ? '0' : '') + number;
        }

        // Logging functionality
        function logMessage(message) {
            const logEntry = document.createElement('div');
            logEntry.textContent = message;
            loggingDisplay.appendChild(logEntry);
        }

        // Additional event listeners for logging
        video.addEventListener('play', () => {
            logMessage('Video started playing');
        });

        video.addEventListener('pause', () => {
            logMessage('Video paused');
        });

        video.addEventListener('volumechange', () => {
            logMessage(`Volume changed to ${video.volume.toFixed(2)}`);
        });

        video.addEventListener('ended', () => {
            logMessage('Video ended');
        });
    </script>
</body>
</html>

Refactored & Commented Code

Next, xFactor applied its enhance code feature to thoroughly comment the initial code, clarifying each step's purpose and ensuring maintainability. Below is the fully Refactored & Commented Code that preserves logging functionality and introduces basic controls in a more robust, modern structure.

View Refactored & Commented Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Refactored Video Player</title>
    <style>
        /* Container for the video */
        #video-container {
            width: 640px;
            height: 480px;
            border: 1px solid black;
            position: relative;
        }

        /* Video controls styling */
        #video-controls {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            box-sizing: border-box;
        }

        /* Logging display styling */
        #logging-display {
            position: absolute;
            bottom: -150px;
            left: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            padding: 10px;
            box-sizing: border-box;
            overflow-y: scroll;
            height: 140px;
        }
    </style>
</head>
<body>
    <div id="video-container">
        <video id="video" width="640" height="480"></video>
        <div id="video-controls">
            <button id="play-pause-button">Play</button>
            <input id="volume-slider" type="range" min="0" max="1" value="1" step="0.01">
            <span id="time-display">00:00 / 00:00</span>
        </div>
        <div id="logging-display"></div>
    </div>

    <script>
    // Get references to HTML elements
    const video = document.getElementById('video');
    const playPauseButton = document.getElementById('play-pause-button');
    const volumeSlider = document.getElementById('volume-slider');
    const timeDisplay = document.getElementById('time-display');
    const loggingDisplay = document.getElementById('logging-display');

    let videoPlaying = false;
    let volumeLevel = 1;
    let muted = false;
    let videoDuration = 0;
    let videoCurrentTime = 0;

    // Set video source
    video.src = 'https://genitive.ai/wp-content/uploads/2025/01/xFactor-Refactoring.mp4';

    // When video can play
    video.addEventListener('canplay', () => {
        videoDuration = video.duration;
        // Optionally auto-play:
        // video.play();
        // videoPlaying = true;
    });

    // Track video time updates
    video.addEventListener('timeupdate', () => {
        videoCurrentTime = video.currentTime;
        updateTimeDisplay();
    });

    // When video ends
    video.addEventListener('ended', () => {
        videoPlaying = false;
        playPauseButton.textContent = 'Play';
        logMessage('Video ended');
    });

    // Play/Pause button
    playPauseButton.addEventListener('click', () => {
        if (videoPlaying) {
            video.pause();
            videoPlaying = false;
            playPauseButton.textContent = 'Play';
            logMessage('Video paused');
        } else {
            video.play();
            videoPlaying = true;
            playPauseButton.textContent = 'Pause';
            logMessage('Video started playing');
        }
    });

    // Volume slider
    volumeSlider.addEventListener('input', () => {
        volumeLevel = volumeSlider.value;
        video.volume = volumeLevel;
        muted = (volumeLevel === '0');
        logMessage('Volume changed to ' + video.volume);
    });

    // Update time display
    function updateTimeDisplay() {
        const minutes = Math.floor(videoCurrentTime / 60);
        const seconds = Math.floor(videoCurrentTime % 60);
        const durationMinutes = Math.floor(videoDuration / 60);
        const durationSeconds = Math.floor(videoDuration % 60);
        timeDisplay.textContent = padZero(minutes) + ':' + padZero(seconds) +
            ' / ' + padZero(durationMinutes) + ':' + padZero(durationSeconds);
    }

    // Pad zeros
    function padZero(number) {
        return (number < 10 ? '0' : '') + number;
    }

    // Logging
    function logMessage(message) {
        const logEntry = document.createElement('div');
        logEntry.textContent = message;
        loggingDisplay.appendChild(logEntry);
    }
    </script>
</body>
</html>

Security Evaluation

In addition to functionality, security was a major priority. The development team conducted a comprehensive security evaluation to identify potential vulnerabilities and risks. Because user data and engagement logs could be sensitive, ensuring that the refactored code adhered to best practices was essential. Some highlights included:

Validating user inputs where necessary
Ensuring no unbounded logging or storage that could lead to injection attacks
Maintaining secure HTTPS connections and avoiding mixed content
Implementing a clean code structure to reduce the overall attack surface

Interactive Demo

Below is a simple embedded version of the final refactored HTML5 video player. You can test the play/pause button, adjust the volume, and see the time/volume logs appear. It demonstrates how the same interactions formerly handled in Flash are now seamlessly managed by JavaScript and displayed in a logging area.

Code in Action with Logging

The refactored player above demonstrates the successful migration from Flash to HTML5. You can see how each interaction—play, pause, volume changes, video end—generates a new timestamped message in the logging area below the video. This mirrors the functionality that was once in Flash but is now fully supported in modern browsers without any plugins.

Conclusion

The XFactor refactor accomplished much more than a simple technical upgrade. It preserved key research objectives, such as logging and analysis of adolescent engagement, while ensuring the usability and security of a modern solution. By transitioning from Flash to HTML5, the development team has future-proofed the Fieldtrip Project's video functionality, reaffirming its continued mission: fostering meaningful dialogue about education among adolescent users.

This transformation showcases how xFactor's AI-powered refactoring capabilities can breathe new life into legacy applications, ensuring they remain functional, secure, and relevant in an ever-evolving technological landscape. The success of this project demonstrates the platform's ability to handle complex code migrations while maintaining critical business logic and user experience requirements.