<commit_before>$(function(){
    var host = location.origin.replace(/^http/, 'ws');
    var ws = new WebSocket(host + '/control');
    var scale = 2;
    var videoSelector = $('#select-video');
    var originalVideoWidth;
    var selectedVideo;
    var ratio = 2;

    $('.video-frame').resizable({
        aspectRatio: true,
        stop: function(event, ui) {
            ratio = (ui.size.width / originalVideoWidth) * 2;
            ws.send(JSON.stringify({
                deviceId: 'all',
                changes: {
                    scale: ratio
                }
            }))
        }
    });

    ws.onmessage = function(event) {
        var data = JSON.parse(event.data);
        selectedVideo = data.selectedVideo;
        populateSelectVideo(data.options, data.selectedVideo);

        //initialize video in devices
        if (videoSelector.val() != data.selectedVideo){
          ws.send(JSON.stringify({ video: videoSelector.val() }));
        }

        //initialize video in control
        document.querySelector('video').src = location.origin + '/uploads/' + videoSelector.val();
        document.querySelector('video').onloadedmetadata = function() {
          originalVideoWidth = this.videoWidth;
          var width = this.videoWidth*(scale/2);
          var height = this.videoHeight*(scale/2);
          $('.video-frame').css('width', width).css('height', height);
        };

        if (data.devices) {
            $.each(data.devices, function(index, device){
                var newElement = document.createElement('div');
                $('.video-frame').append(newElement);
                $(newElement)
                    .addClass('device')
                    .css({
                        height:device.height / scale,
                        width:device.width / scale,
                        top:(-device.position.top || 0) + 'px',
                        left:(-device.position.left || 0) + 'px'
                    })
                    .draggable({
                        containment: 'parent',
                        stop: function(event, ui) {
                            ws.send(JSON.stringify({
                                deviceId:device.id,
                                changes:{
                                    position:{
                                        top: -ui.position.top,
                                        left: -ui.position.left
                                    }}}))
                        }
                    //}).rotatable({
                    //    snap: true,
                    //    stop: function(event, ui) {
                    //        ws.send(JSON.stringify({
                    //            deviceId:device.id,
                    //            changes:{
                    //                rotation: ui.angle.current.toFixed(2)+ 'rad'
                    //            }}))
                    //    }
                    }).append('<span class="device-id">' + device.id + '</span>');
            });

            if (data.devices[0].scale && scale != data.devices[0].scale) {
                scale = data.devices[0].scale || scale;

                $('.video-frame').css('width', setToScale).css('height', setToScale);
            }


            function setToScale(idx, value) {
                value = parseFloat(value);
                return value * (scale / 2);
            }
        }
    };

    function pingWithText(text) {
        return function(){
            ws.send(JSON.stringify(text))
            if (text == 'reset') {
              document.querySelector('video').currentTime = 0;
            } else if (text == 'pause') {
              document.querySelector('video').pause();
            } else if (text == 'resume') {
              document.querySelector('video').play();
            }
        }
    }

    window.resetVideos = pingWithText('reset');
    window.pause = pingWithText('pause');
    window.resume = pingWithText('resume');

    //Populate video dropdown
    function populateSelectVideo(options, video) {
      var select = document.getElementById('select-video');

      for (var i = 0; i < options.length; i++){
          var opt = options[i];
          var el = document.createElement('option');
          el.textContent = opt;
          el.value = opt;
          select.appendChild(el);
      }

      if (video){
        document.getElementById('select-video').value = video;
      }
    }

    //Listen for dropdown change
    videoSelector.on('change', function() {
      console.log(selectedVideo);
      if (selectedVideo != $(this).val()){
        selectedVideo=$(this).val();
        scale = 2;
        document.querySelector('video').src = location.origin + '/uploads/' + $(this).val();
        ws.send(JSON.stringify({ video: $(this).val() }));
      }
    });

});<commit_msg>split pingWithText; populate select using jquery<commit_after>$(function(){
    var host = location.origin.replace(/^http/, 'ws');
    var ws = new WebSocket(host + '/control');
    var scale = 2;
    var videoSelector = $('#select-video');
    var originalVideoWidth;
    var selectedVideo;
    var ratio = 2;

    $('.video-frame').resizable({
        aspectRatio: true,
        stop: function(event, ui) {
            ratio = (ui.size.width / originalVideoWidth) * 2;
            ws.send(JSON.stringify({
                deviceId: 'all',
                changes: {
                    scale: ratio
                }
            }))
        }
    });

    ws.onmessage = function(event) {
        var data = JSON.parse(event.data),
        selectedVideo = data.selectedVideo;
        populateSelectVideo(data.videos, selectedVideo);

        //initialize video in devices
        if (videoSelector.val() != selectedVideo){
          ws.send(JSON.stringify({ video: videoSelector.val() }));
        }

        //initialize video in control
        document.querySelector('video').src = location.origin + '/uploads/' + videoSelector.val();
        document.querySelector('video').onloadedmetadata = function() {
          originalVideoWidth = this.videoWidth;
          var width = this.videoWidth*(scale/2);
          var height = this.videoHeight*(scale/2);
          $('.video-frame').css('width', width).css('height', height);
        };

        if (data.devices) {
            $.each(data.devices, function(index, device){
                var newElement = document.createElement('div');
                $('.video-frame').append(newElement);
                $(newElement)
                    .addClass('device')
                    .css({
                        height:device.height / scale,
                        width:device.width / scale,
                        top:(-device.position.top || 0) + 'px',
                        left:(-device.position.left || 0) + 'px'
                    })
                    .draggable({
                        containment: 'parent',
                        stop: function(event, ui) {
                            ws.send(JSON.stringify({
                                deviceId:device.id,
                                changes:{
                                    position:{
                                        top: -ui.position.top,
                                        left: -ui.position.left
                                    }}}))
                        }
                    //}).rotatable({
                    //    snap: true,
                    //    stop: function(event, ui) {
                    //        ws.send(JSON.stringify({
                    //            deviceId:device.id,
                    //            changes:{
                    //                rotation: ui.angle.current.toFixed(2)+ 'rad'
                    //            }}))
                    //    }
                    }).append('<span class="device-id">' + device.id + '</span>');
            });

            if (data.devices[0].scale && scale != data.devices[0].scale) {
                scale = data.devices[0].scale || scale;

                $('.video-frame').css('width', setToScale).css('height', setToScale);
            }


            function setToScale(idx, value) {
                value = parseFloat(value);
                return value * (scale / 2);
            }
        }
    };

    function pingWithText(text) {
        ws.send(JSON.stringify(text));
    }

    window.resetVideos = function() {
        document.querySelector('video').currentTime = 0;
        pingWithText('reset');
    };

    window.pause = function() {
        document.querySelector('video').pause();
        pingWithText('pause');
    };

    window.resume = function() {
        document.querySelector('video').play();
        pingWithText('resume');
    };

    //Populate video dropdown
    function populateSelectVideo(allVideos, currentVideo) {
      var select = $('#select-video');

        select.append($.map(allVideos, function (video) {
            return $('<option>', {value: video}).text(video);
        }) );

      if (currentVideo){
        select.value = currentVideo;
      }
    }

    //Listen for dropdown change
    videoSelector.on('change', function() {
      console.log(selectedVideo);
      if (selectedVideo != $(this).val()){
        selectedVideo=$(this).val();
        scale = 2;
        document.querySelector('video').src = location.origin + '/uploads/' + $(this).val();
        ws.send(JSON.stringify({ video: $(this).val() }));
      }
    });

});
{'fraction_non_alphanumeric': 0.14116902300063305, 'fraction_numerical': 0.0030597172399240346, 'mean_word_length': 1.3638403990024939, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 8, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '554795', 'n_tokens_mistral': 2449, 'n_tokens_neox': 2305, 'n_words': 438}