<commit_before>{% extends "recording/base.html" %}
{% load i18n %}
{% load bootstrap %}
{% load staticfiles %}
{% load static %}
{% block body %}
{% block styles %}
<link rel="stylesheet" href="{% static 'UX/css/student/recording.css' %}">
<link rel="stylesheet" href="{% static 'UX/css/student/overlay.css' %}">
{% endblock %}
<div class="panel panel-info">
    <div class="panel-heading">
        <div class="inline-block"><h3> {{question_name}}</h3></div>
        <button class="btn btn-warning" id="download" style="display:none; margin-top:33%;">
            Download
        </button>
    </div>
    <div class="panel-body">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-6 col-sm-6 .col-lg-6" style="text-align: center;">
                        <video id="gum" autoplay loop muted="muted"></video>
                        <div style="display:none;" id="custom-message">Recording starts in ..
                            <br>
                        </div>
                        <div id="count" style="display:none;"> 5</div>
                        <div id="count-replace" style="display:none;"> Ask your question</div>
                    </div>
                    <div class="col-md-6 col-sm-6 .col-lg-6"
                         style="text-align: center; margin-top: 10%;">
                        <div class="row">
                            <div class="col-md-12col-sm-12 .col-lg-12">
                                <h1>
                                    <time>00:00:00</time>
                                </h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12col-sm-12 .col-lg-12">
                                <button class="btn btn-warning" id="save" style="display:none;">Save</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12col-sm-12 .col-lg-12">
                                <button class="btn btn-warning" id="record">Start Recording</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none">
    <input type="hidden" name="csrfmiddlewaretoken" value="$csrf_token"/>
    <input type="hidden" name="interview_question" id="interview_question" value="{{questions.id}}"/>
    <input type="hidden" name="interview" id="interview" value="{{questions.interview.id}}"/>
</div>

{% endblock %}
{% block scripts %}
<script src="{% static 'js/webRTC/adapter.js' %}"></script>
<script src="{% static 'js/webRTC/record.js' %}"></script>
<script src='{% static "js/recording/loadingoverlay.min.js" %}'></script>
<script>
    var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
    var query = window.matchMedia("(orientation:landscape)");

    if (query.matches == false) {
        alert("Rotate your screen to landscape for the best user experience during the interview.");
    }

</script>
{% endblock %}<commit_msg>WIP: Add camera select for interview<commit_after>{% extends "recording/base.html" %}
{% load i18n %}
{% load bootstrap %}
{% load staticfiles %}
{% load static %}
{% block body %}
{% block styles %}
<link rel="stylesheet" href="{% static 'UX/css/student/recording.css' %}">
<link rel="stylesheet" href="{% static 'UX/css/student/overlay.css' %}">
{% endblock %}
<div class="panel panel-info">
    <div class="panel-heading">
        <div class="inline-block"><h3> {{question_name}}</h3></div>
        <button class="btn btn-warning" id="download" style="display:none; margin-top:33%;">
            Download
        </button>
    </div>
    <div class="panel-body">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="row">
                    <div class="select">
                        <label for="videoSource">Video source: </label><select id="videoSource"></select>
                    </div>
                    <div class="col-md-6 col-sm-6 .col-lg-6" style="text-align: center;">
                        <video id="gum" autoplay loop muted="muted"></video>
                        <div style="display:none;" id="custom-message">Recording starts in ..
                            <br>
                        </div>
                        <div id="count" style="display:none;"> 5</div>
                        <div id="count-replace" style="display:none;"> Ask your question</div>
                    </div>
                    <div class="col-md-6 col-sm-6 .col-lg-6"
                         style="text-align: center; margin-top: 10%;">
                        <div class="row">
                            <div class="col-md-12col-sm-12 .col-lg-12">
                                <h1>
                                    <time>00:00:00</time>
                                </h1>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12col-sm-12 .col-lg-12">
                                <button class="btn btn-warning" id="save" style="display:none;">Save</button>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12col-sm-12 .col-lg-12">
                                <button class="btn btn-warning" id="record">Start Recording</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="display:none">
    <input type="hidden" name="csrfmiddlewaretoken" value="$csrf_token"/>
    <input type="hidden" name="interview_question" id="interview_question" value="{{questions.id}}"/>
    <input type="hidden" name="interview" id="interview" value="{{questions.interview.id}}"/>
</div>

{% endblock %}
{% block scripts %}
<script src="{% static 'js/webRTC/adapter.js' %}"></script>
<script src="{% static 'js/webRTC/record.js' %}"></script>
<script src='{% static "js/recording/loadingoverlay.min.js" %}'></script>
<script>
    var orientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
    var query = window.matchMedia("(orientation:landscape)");

    if (query.matches == false) {
        alert("Rotate your screen to landscape for the best user experience during the interview.");
    }


    var videoSelect = document.querySelector('select#videoSource');
    var selectors = [videoSelect];
    function gotDevices(deviceInfos) {
        // Handles being called several times to update labels. Preserve values.
        var values = selectors.map(function(select) {
            return select.value;
        });
        selectors.forEach(function(select) {
            while (select.firstChild) {
                select.removeChild(select.firstChild);
            }
        });

        for (var i = 0; i !== deviceInfos.length; ++i) {
            var deviceInfo = deviceInfos[i];
            var option = document.createElement('option');
            option.value = deviceInfo.deviceId;
            if (deviceInfo.kind === 'videoinput') {
                option.text = deviceInfo.label || 'camera ' + (videoSelect.length + 1);
                videoSelect.appendChild(option);
            } else {
                console.log('Some other kind of source/device: ', deviceInfo);
            }
        }

        selectors.forEach(function(select, selectorIndex) {
            if (Array.prototype.slice.call(select.childNodes).some(function(n) {
                return n.value === values[selectorIndex];
            })) {
                select.value = values[selectorIndex];
            }
        });
    }

    navigator.mediaDevices.enumerateDevices().then(gotDevices).catch(handleError);
    function gotStream(stream) {
        window.stream = stream; // make stream available to console
        videoElement.srcObject = stream;
        // Refresh button list in case labels have become available
        return navigator.mediaDevices.enumerateDevices();
    }

    function start() {
        if (window.stream) {
            window.stream.getTracks().forEach(function(track) {
                track.stop();
            });
        }

        var videoSource = videoSelect.value;
        var constraints = {
            video: {deviceId: videoSource ? {exact: videoSource} : undefined}
        };

        navigator.mediaDevices.getUserMedia(constraints).
            then(gotStream).then(gotDevices).catch(handleError);
    }

    videoSelect.onchange = start;

    start();

    function handleError(error) {
        console.log('navigator.getUserMedia error: ', error);
    }
</script>
{% endblock %}
{'fraction_non_alphanumeric': 0.15216183172168501, 'fraction_numerical': 0.009336445481827277, 'mean_word_length': 1.7316332726168793, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5704902', 'n_tokens_mistral': 2586, 'n_tokens_neox': 2393, 'n_words': 512}