}
#sidebar-wrapper {
- z-index: 1000;
+ z-index: 8;
position: fixed;
width: 0;
height: calc(100% - 60px);
from { max-height:2000px;}
to { max-height:0px;}
}
+
+#settings {
+ z-index: 9;
+ position: fixed;
+ background: rgba(10, 56, 127, 0.9);
+ width: 100%;
+ transition: .4s ease-out;
+ color: white;
+ max-height: 80%;
+ overflow: auto;
+ top: -100%;
+ padding: 15px 0;
+}
+
+#settings select {
+ color: white;
+}
+
+#settings option {
+ color: #000;
+}
+
+#settings .content {
+ width: 80%;
+ height: 100%;
+ margin: auto;
+}
+
+#settings.toggled {
+ top: 67px;
+}
+
+#settings .form-group .form-control:focus {
+ background-image: linear-gradient(#d2d2d2, #d2d2d2), linear-gradient(#d2d2d2, #d2d2d2)
+}
+
+#settings .checkbox input[type=checkbox]:checked + .checkbox-material .check,
+#settings .checkbox input[type=checkbox]:checked + .checkbox-material .check:before,
+#settings .checkbox-default input[type=checkbox]:checked + .checkbox-material .check:before {
+ color: white;
+}
+
+#settings .btn {
+ color: rgba(0, 10, 66, 0.84);
+ background-color: #E8E8E8;
+}
<body>
<div ng-include="'partials/menu.html'"></div>
+ <div ng-include="'partials/settings.html'"></div>
<div id="wrapper" class="toggled">
<!-- Sidebar -->
<script type="text/javascript" src="src/vertoControllers/controllers/ModalDialpadController.js"></script>
<script type="text/javascript" src="src/vertoControllers/controllers/ModalWsReconnectController.js"></script>
<script type="text/javascript" src="src/vertoControllers/controllers/ModalLoginInformationController.js"></script>
- <script type="text/javascript" src="src/vertoControllers/controllers/ModalSettingsController.js"></script>
+ <script type="text/javascript" src="src/vertoControllers/controllers/SettingsController.js"></script>
<script type="text/javascript" src="src/vertoControllers/controllers/PreviewController.js"></script>
<script type="text/javascript" src="src/vertoDirectives/vertoDirectives.module.js"></script>
</a>
</li>
<li class="navbar-item-icon" ng-show="verto.data.connected">
- <a href="" ng-click="openModal('partials/modal_settings.html', 'ModalSettingsController')">
+ <a href="" ng-click="toggleSettings()">
<i class="mdi-action-settings"></i>
</a>
</li>
+++ /dev/null
-<div class="modal-header">
- <h3 class="modal-title">Device Settings</h3>
-</div>
-<div class="modal-body">
- <div class="form-group" ng-show="mydata.useVideo">
- <label for="settings-camera">Camera:</label>
- <select name="camera" id="settings-camera" class="form-control"
- ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
- </select>
- </div>
-
- <div class="form-group" ng-show="mydata.useVideo">
- <label for="settings-share-device">Share device:</label>
- <select name="share-device" id="settings-share-device" class="form-control"
- ng-model="mydata.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
- </select>
- </div>
-
- <div class="form-group">
- <label for="settings-microphone">Microphone:</label>
- <select name="microphone" id="settings-microphone" class="form-control"
- ng-model="mydata.selectedAudio" ng-options="item.id as item.label for item in verto.data.audioDevices">
- </select>
- </div>
-
- <div class="form-group">
- <label for="settings-microphone">
- Speaker:
- <span ng-show="!speakerFeature" class="unsupported">
- Your browser doesn't seem to support this feature
- </span>
- </label>
- <select name="microphone" id="settings-microphone" class="form-control" ng-disabled="!speakerFeature"
- ng-model="mydata.selectedSpeaker" ng-options="item.id as item.label for item in verto.data.speakerDevices">
- </select>
- </div>
-
- <a class="btn btn-primary" href="" ng-click="showPreview()">Preview Settings</a>
- <a class="btn btn-primary" href="" ng-click="refreshDeviceList()">Refresh device list</a>
-
- <div class="form-group">
- <label for="settings-microphone">General settings:</label>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="use_video" value="mydata.useVideo" ng-model="mydata.useVideo">
- Use Video
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="use_stereo_audio" ng-value="mydata.useStereo" ng-model="mydata.useStereo">
- Stereo Audio
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="use_stun" ng-value="mydata.useSTUN" ng-model="mydata.useSTUN">
- Use STUN
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="mirror_input" ng-value="mydata.mirrorInput" ng-model="mydata.mirrorInput">
- Scale Remote Video To Match Camera Resolution
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="ask_recover_call" ng-value="mydata.askRecoverCall" ng-model="mydata.askRecoverCall">
- Ask before recovering call
- </label>
- </div>
-
- </div>
-
- <div class="form-group">
- <label for="settings-framerate">Best frame rate:</label>
- <select name="settings-framerate" id="settings-framerate" class="form-control"
- ng-model="mydata.bestFrameRate"
- ng-options="item.id as item.label for item in verto.framerate"></select>
- </div>
-
- <div class="form-group">
- <label for="settings-microphone">Audio settings:</label>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="googEchoCancellation" value="mydata.googEchoCancellation" ng-model="mydata.googEchoCancellation">
- Echo Cancellation
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="googNoiseSuppression" value="mydata.googNoiseSuppression" ng-model="mydata.googNoiseSuppression">
- Noise Suppression
- </label>
- </div>
- <div class="checkbox">
- <label>
- <input type="checkbox" name="googHighpassFilter" value="mydata.googHighpassFilter" ng-model="mydata.googHighpassFilter">
- Highpass Filter
- </label>
- </div>
- </div>
-
- <div class="form-group">
- <label>Video settings:</label> <br>
- <input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">
-
-
- <div ng-show="mydata.useDedenc" class="dedicated_encoder">
- <p>Dedicated Remote Encoder enabled.</b>
- </div>
-
- <div class="checkbox">
- <label>
- <input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
- Automatically determine speed and resolution settings
- </label>
- </div>
-
- <div class="checkbox" ng-show="mydata.autoBand">
- <label>
- <input type="checkbox" ng-model="mydata.testSpeedJoin">
- Recheck bandwidth before each outgoing call
- </label>
- </div>
-
- <a ng-show="mydata.autoBand" class="btn btn-primary" href="" ng-click="testSpeed()">Check Network Speed</a> <span ng-bind="speedMsg"></span>
-
- <div ng-show="!mydata.autoBand">
- <label for="video-quality">Video quality:</label>
- <select name="video_quality" id="video-quality" class="form-control"
- ng-disabled="mydata.autoBand"
- ng-model="mydata.vidQual"
- ng-change="checkVideoQuality(mydata.vidQual)"
- ng-options="item.id as item.label for item in verto.videoQuality"></select>
- </div>
-
- <div ng-show="!mydata.autoBand">
- <label for="incoming-bandwidth">Max incoming bandwidth:</label>
- <select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
- ng-model="mydata.incomingBandwidth"
- ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
- ng-options="item.id as item.label for item in verto.bandwidth"></select>
- </div>
-
- <div ng-show="!mydata.autoBand">
- <label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
- <select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
- ng-model="mydata.outgoingBandwidth"
- ng-options="item.id as item.label for item in verto.bandwidth"></select>
- </div>
- </div>
-</div>
-<div class="modal-footer">
- <button class="btn btn-danger pull-left btn-pull-left" ng-click="resetSettings()">Factory reset</button>
- <!-- <button class="btn btn-primary" ng-click="cancel()">Cancel</button> -->
- <button class="btn btn-primary" ng-click="ok()">Save Device Settings</button>
-</div>
--- /dev/null
+<div id="settings" ng-controller="SettingsController">
+ <div class="content">
+ <div class="col-md-4">
+
+ <div class="form-group" ng-show="mydata.useVideo">
+ <label for="settings-camera">Camera:</label>
+ <select name="camera" id="settings-camera" class="form-control"
+ ng-model="mydata.selectedVideo" ng-options="item.id as item.label for item in verto.data.videoDevices">
+ </select>
+ </div>
+
+ <div class="form-group" ng-show="mydata.useVideo">
+ <label for="settings-share-device">Share device:</label>
+ <select name="share-device" id="settings-share-device" class="form-control"
+ ng-model="mydata.selectedShare" ng-options="item.id as item.label for item in verto.data.shareDevices">
+ </select>
+ </div>
+
+ <div class="form-group">
+ <label for="settings-microphone">Microphone:</label>
+ <select name="microphone" id="settings-microphone" class="form-control"
+ ng-model="mydata.selectedAudio" ng-options="item.id as item.label for item in verto.data.audioDevices">
+ </select>
+ </div>
+
+ <div class="form-group">
+ <label for="settings-microphone">
+ Speaker:
+ <span ng-show="!speakerFeature" class="unsupported">
+ Your browser doesn't seem to support this feature
+ </span>
+ </label>
+ <select name="microphone" id="settings-microphone" class="form-control" ng-disabled="!speakerFeature"
+ ng-model="mydata.selectedSpeaker" ng-options="item.id as item.label for item in verto.data.speakerDevices">
+ </select>
+ </div>
+
+ <div class="form-group">
+ <label for="settings-framerate">Best frame rate:</label>
+ <select name="settings-framerate" id="settings-framerate" class="form-control"
+ ng-model="mydata.bestFrameRate"
+ ng-options="item.id as item.label for item in verto.framerate"></select>
+ </div>
+
+ <a class="btn btn-primary" href="" ng-click="showPreview()">Preview Settings</a>
+ <a class="btn btn-primary" href="" ng-click="refreshDeviceList()">Refresh device list</a>
+ </div>
+ <div class="col-md-4">
+ <div class="form-group">
+ <label for="settings-microphone">General settings:</label>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="use_video" value="mydata.useVideo" ng-model="mydata.useVideo">
+ Use Video
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="use_stereo_audio" ng-value="mydata.useStereo" ng-model="mydata.useStereo">
+ Stereo Audio
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="use_stun" ng-value="mydata.useSTUN" ng-model="mydata.useSTUN">
+ Use STUN
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="mirror_input" ng-value="mydata.mirrorInput" ng-model="mydata.mirrorInput">
+ Scale Remote Video To Match Camera Resolution
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="ask_recover_call" ng-value="mydata.askRecoverCall" ng-model="mydata.askRecoverCall">
+ Ask before recovering call
+ </label>
+ </div>
+
+ <div class="form-group">
+ <label for="settings-microphone">Audio settings:</label>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="googEchoCancellation" value="mydata.googEchoCancellation" ng-model="mydata.googEchoCancellation">
+ Echo Cancellation
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="googNoiseSuppression" value="mydata.googNoiseSuppression" ng-model="mydata.googNoiseSuppression">
+ Noise Suppression
+ </label>
+ </div>
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" name="googHighpassFilter" value="mydata.googHighpassFilter" ng-model="mydata.googHighpassFilter">
+ Highpass Filter
+ </label>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="col-md-4">
+
+ <div class="form-group">
+ <label>Video settings:</label> <br>
+ <input type="hidden" name="use_dedenc" ng-value="mydata.useDedenc" ng-model="mydata.useDedenc">
+
+
+ <div ng-show="mydata.useDedenc" class="dedicated_encoder">
+ <p>Dedicated Remote Encoder enabled.</b>
+ </div>
+
+ <div class="checkbox">
+ <label>
+ <input type="checkbox" ng-model="mydata.autoBand" ng-change="checkAutoBand(mydata.autoBand)">
+ Automatically determine speed and resolution settings
+ </label>
+ </div>
+
+ <div class="checkbox" ng-show="mydata.autoBand">
+ <label>
+ <input type="checkbox" ng-model="mydata.testSpeedJoin">
+ Recheck bandwidth before each outgoing call
+ </label>
+ </div>
+
+ <a ng-show="mydata.autoBand" class="btn btn-primary" href="" ng-click="testSpeed()">Check Network Speed</a> <span ng-bind="speedMsg"></span>
+
+ <div ng-show="!mydata.autoBand">
+ <label for="video-quality">Video quality:</label>
+ <select name="video_quality" id="video-quality" class="form-control"
+ ng-disabled="mydata.autoBand"
+ ng-model="mydata.vidQual"
+ ng-change="checkVideoQuality(mydata.vidQual)"
+ ng-options="item.id as item.label for item in verto.videoQuality"></select>
+ </div>
+
+ <div ng-show="!mydata.autoBand">
+ <label for="incoming-bandwidth">Max incoming bandwidth:</label>
+ <select name="incoming_bandwidth" id="incoming-bandwidth" class="form-control"
+ ng-model="mydata.incomingBandwidth"
+ ng-change="checkUseDedRemoteEncoder(mydata.incomingBandwidth)"
+ ng-options="item.id as item.label for item in verto.bandwidth"></select>
+ </div>
+
+ <div ng-show="!mydata.autoBand">
+ <label for="outgoing-bandwidth">Max outgoing bandwidth:</label>
+ <select name="outgoing_bandwidth" id="outgoing-bandwidth" class="form-control"
+ ng-model="mydata.outgoingBandwidth"
+ ng-options="item.id as item.label for item in verto.bandwidth"></select>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
angular.element('#wrapper').addClass('toggled');
};
+ $scope.toggleSettings = function() {
+ var settingsEl = angular.element(document.querySelector('#settings'));
+ settingsEl.toggleClass('toggled');
+ $rootScope.$emit('toggledSettings', settingsEl.hasClass('toggled'));
+ };
+
$scope.goFullscreen = function() {
if (storage.data.userStatus !== 'connected') {
return;
angular
.module('vertoControllers')
- .controller('ModalSettingsController', ['$scope', '$http',
- '$location', '$modalInstance', '$rootScope', 'storage', 'verto', 'toastr',
- function($scope, $http, $location, $modalInstance, $rootScope, storage, verto, toastr) {
+ .controller('SettingsController', ['$scope', '$http',
+ '$location', '$rootScope', 'storage', 'verto',
+ function($scope, $http, $location, $rootScope, storage, verto) {
console.debug('Executing ModalSettingsController.');
+ $.material.init();
+
+ $scope.speakerFeature = typeof document.getElementById('webcam').sinkId !== 'undefined';
$scope.storage = storage;
$scope.verto = verto;
$scope.mydata = angular.copy(storage.data);
- $scope.speakerFeature = typeof document.getElementById('webcam').sinkId !== 'undefined';
+ $rootScope.$on('toggledSettings', function(e, status) {
+ if (status) {
+ $scope.mydata = angular.copy(storage.data);
+ } else {
+ $scope.ok();
+ }
+ });
$scope.ok = function() {
if ($scope.mydata.selectedSpeaker != storage.data.selectedSpeaker) {
if (storage.data.autoBand) {
$scope.testSpeed();
}
- $modalInstance.close('Ok.');
- };
-
- $scope.cancel = function() {
- $modalInstance.dismiss('cancel');
};
$scope.refreshDeviceList = function() {
if (confirm('Factory Reset Settings?')) {
storage.factoryReset();
$scope.logout();
- $modalInstance.close('Ok.');
window.location.reload();
};
};
projects / thirdparty / freeswitch.git / commitdiff
