<commit_before><!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Borderless Camera</title>
    <style>
        /*html, body {
            background: rgba(0, 0, 0, 0);
        }*/
        body {
            margin: 0;
            overflow: hidden;
        }
        .spacerH {
            margin-left: 0.5vw;
            margin-right: 0.5vw;            
        }
        .relButton {
            color: white;
            background-color:gray;
            float:left;
            width:4vw;height:4vw;
            text-align:center;
            margin-top:0.4vw;
            margin-bottom:0.4vw;
            border-radius: 1vw;
            font-size: 3.1vw;
            cursor: pointer;
        }
        .flipped {
            transform: scale(-1, 1);
            filter: FlipH;
        }
        #video {
            z-index:0;
            /*transform: scale(-1, 1);
            filter: FlipH;       */
            /*opacity: 0.5;*/
            /*-webkit-app-region: drag;*/
            /*position: absolute;            */
        }
        #draggable {
            z-index:5;            
            position: absolute;
            width: 96%;
            height: 52vw;
            background: red;
            -webkit-app-region: drag;
            opacity: 0.0;
            margin: 2%;
            /*display:none;*/
        }
        #overlay-panel {
            z-index:10;
    position: absolute;
    /* width: 53%; */
    /* height: 7%; */
    background: #5d5d5d;
    /* -webkit-app-region: drag; */
    opacity: 0.5;
    margin-top: 55%;
    /* display: none; */
    margin-left: 27%;
    border-radius: 1vw;
    display:block;
        }
    </style>
  </head>
  <body>


    <div overlayPanel id="overlay-panel">
        <div class="spacerH" style="    color: white;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 4vw;
    float:left;">
            Borderless Camera
        </div>
        <div mirrorBtn class="relButton spacerH">
            M
        </div>        
        <div infoBtn class="relButton spacerH">
            ℹ
        </div>
        <div closeBtn class="relButton spacerH">
            ⨯
        </div>
        
    </div>

    <div id="draggable"></div>


    <video videoCanvas id="video" width="100%" height="100%" autoplay></video>

    <script>
        var ipc = require('electron').ipcRenderer;
        const {shell} = require('electron')
        var video = document.querySelector('[videoCanvas]');


        // Prefer camera resolution nearest to 1280x720.
        navigator.mediaDevices.getUserMedia({ 
            audio: false, 
            video: { width: 1280, height: 720 
        } })
        .then(function(mediaStream) {
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.

        k=document.querySelector('[overlayPanel]')


        document.querySelector('*').addEventListener("mousemove", () => {
            console.log('move')
            k.style.opacity=0.5
        });

        setInterval(() =>{
            k.style.opacity=0.0
        }, 4000)

        document.body.addEventListener("keypress", (ev) => {
            if (ev.key === 'q') {
                ipc.send('invokeAction', 'appQuit');
            }
            if (ev.key === 'd') {
                ipc.send('invokeAction', 'debugMode');
            }
            if (ev.key === 't') {
                ipc.send('invokeAction', 'toggleVisibleOnAllWorkspaces');
            }
            if (ev.key === 'a') {
                ipc.send('invokeAction', 'toggleAlwaysOnTop');
            }
            console.log(ev)
        });

        document.querySelector('[mirrorBtn]').addEventListener("click", (ev) => {<commit_msg>Only Show control panel after 1000ms of hover<commit_after><!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <title>Borderless Camera</title>
    <style>
        /*html, body {
            background: rgba(0, 0, 0, 0);
        }*/
        body {
            margin: 0;
            overflow: hidden;
        }
        .spacerH {
            margin-left: 0.5vw;
            margin-right: 0.5vw;
        }
        .relButton {
            color: white;
            background-color:gray;
            float:left;
            width:4vw;height:4vw;
            text-align:center;
            margin-top:0.4vw;
            margin-bottom:0.4vw;
            border-radius: 1vw;
            font-size: 3.1vw;
            cursor: pointer;
        }
        .flipped {
            transform: scale(-1, 1);
            filter: FlipH;
        }
        #video {
            z-index:0;
            /*transform: scale(-1, 1);
            filter: FlipH;       */
            /*opacity: 0.5;*/
            /*-webkit-app-region: drag;*/
            /*position: absolute;            */
        }
        #draggable {
            z-index:5;
            position: absolute;
            width: 80vw;
            height: 40vw;
            background: red;
            -webkit-app-region: drag;
            opacity: 0.0;
            margin: 10vw;
            /*display:none;*/
        }
        #overlayWrapper {
          z-index:9;            
          position: absolute;
          margin: 2vw;
          width: 96vw;
          height: 57vw;
          /*background: blue;*/
        }
        #overlay-panel {
            z-index:10;
    position: absolute;
    /* width: 53%; */
    /* height: 7%; */
    background: #5d5d5d;
    /* -webkit-app-region: drag; */
    opacity: 0.5;
    margin-top: 50vw;
    /* display: none; */
    margin-left: 27%;
    border-radius: 1vw;
    display:block;
        }
    </style>
  </head>
  <body>




    <div id="draggable"></div>

    <div overlayWrapper id="overlayWrapper">
        <div overlayPanel id="overlay-panel">
            <div class="spacerH" style="    color: white;
        font-family: sans-serif;
        font-weight: bold;
        font-size: 4vw;
        float:left;">
                Borderless Camera
            </div>
            <div mirrorBtn class="relButton spacerH">
                M
            </div>
            <div infoBtn class="relButton spacerH">
                ℹ
            </div>
            <div closeBtn class="relButton spacerH">
                ⨯
            </div>

        </div>
    </div>

    <video videoCanvas id="video" width="100%" height="100%" autoplay></video>

    <script>
        var ipc = require('electron').ipcRenderer;
        const {shell} = require('electron')
        var video = document.querySelector('[videoCanvas]');


        // Prefer camera resolution nearest to 1280x720.
        navigator.mediaDevices.getUserMedia({
            audio: false,
            video: { width: 1280, height: 720
        } })
        .then(function(mediaStream) {
            video.srcObject = mediaStream;
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.

        // content panel m x
        overlayPanelEl = document.querySelector('[overlayPanel]')

        var timeout
        var activeMode = false
        var enterMs = new Date().getTime()

        function showPanel() {
            overlayPanelEl.style.opacity = 0.5
            activeMode = true
        }

        function hidePanel() {
            overlayPanelEl.style.opacity = 0.0
            activeMode = false
        }

        document.addEventListener("mousemove", (ev) => {
            currMs = new Date().getTime()
            // console.log('onMouseMove')

            // ignore the first 1000ms throttle
            if (currMs - enterMs > 1000) {
                console.log(currMs , enterMs)
                enterMs = currMs
                
                clearTimeout(timeout);
                timeout = setTimeout(function(){
                  // console.log('onEnterAndHold',ev.clientX,ev.clientY, activeMode)
                
                  showPanel()
                }, 1000);                          
            }

        });



        document.querySelector('[overlayWrapper]').addEventListener("mouseleave", (ev) => {
            clearTimeout(timeout);
            // console.log('-----onMouseOut',ev.clientX,ev.clientY)            
            activeMode = false
            hidePanel()
        });

        document.body.addEventListener("keypress", (ev) => {
            if (ev.key === 'q') {
                ipc.send('invokeAction', 'appQuit');
            }
            if (ev.key === 'd') {
                ipc.send('invokeAction', 'debugMode');
            }
            if (ev.key === 't') {
                ipc.send('invokeAction', 'toggleVisibleOnAllWorkspaces');
            }
            if (ev.key === 'a') {
                ipc.send('invokeAction', 'toggleAlwaysOnTop');
            }
            console.log(ev)
        });

        document.querySelector('[mirrorBtn]').addEventListener("click", (ev) => {
{'fraction_non_alphanumeric': 0.13663663663663664, 'fraction_numerical': 0.019197769197769197, 'mean_word_length': 1.3613573056469992, 'pattern_counts': {'":': 2, '<': 57, '<?xml version=': 0, '>': 66, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3359830', 'n_tokens_mistral': 2858, 'n_tokens_neox': 2644, 'n_words': 524}