1/* 2 * Copyright (C) 2022 Huawei Device Co., Ltd. 3 * Licensed under the Apache License, Version 2.0 (the "License"); 4 * you may not use this file except in compliance with the License. 5 * You may obtain a copy of the License at 6 * 7 * http://www.apache.org/licenses/LICENSE-2.0 8 * 9 * Unless required by applicable law or agreed to in writing, software 10 * distributed under the License is distributed on an "AS IS" BASIS, 11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 * See the License for the specific language governing permissions and 13 * limitations under the License. 14 */ 15 16import {BaseElement, element} from "../../../base-ui/BaseElement.js"; 17import "../../../base-ui/radiobox/LitRadioBox.js"; 18import {LitRadioBox} from "../../../base-ui/radiobox/LitRadioBox.js"; 19import "../../../base-ui/slider/LitSlider.js"; 20import {LitSlider} from "../../../base-ui/slider/LitSlider.js"; 21 22@element('record-setting') 23export class SpRecordSetting extends BaseElement { 24 private memoryBufferSlider: LitSlider | undefined; 25 private maxDurationSliders: LitSlider | undefined; 26 27 private radioBox: LitRadioBox | undefined 28 29 get recordMod(): boolean { 30 if (this.radioBox) { 31 return this.radioBox.checked 32 } 33 return false; 34 } 35 36 get bufferSize(): number { 37 let bufferSize = this.shadowRoot?.querySelector(".buffer-size") as HTMLElement 38 return Number(bufferSize.getAttribute("percent")); 39 } 40 41 get maxDur(): number { 42 let bufferSize = this.shadowRoot?.querySelector(".max-duration") as HTMLElement 43 return Number(bufferSize.getAttribute("percent")); 44 } 45 46 initElements(): void { 47 this.radioBox = this.shadowRoot?.querySelector("#litradio") as LitRadioBox 48 this.memoryBufferSlider = this.shadowRoot?.querySelector<LitSlider>('#memory-buffer') as LitSlider; 49 50 let sliderSize1 = this.memoryBufferSlider.sliderSize; 51 52 this.maxDurationSliders = this.shadowRoot?.querySelector<LitSlider>('#max-duration') as LitSlider; 53 let sliderSize2 = this.maxDurationSliders.sliderSize; 54 } 55 56 initHtml(): string { 57 return ` 58<style> 59:host{ 60 display: block; 61 width: 100%; 62 height: 100%; 63 position: relative; 64 background: background: var(--dark-background3,#FFFFFF); 65 border-radius: 0px 16px 16px 0px; 66} 67.root { 68 display: grid; 69 grid-template-columns: repeat(1, 1fr); 70 grid-template-rows: min-content min-content min-content; 71 grid-gap: 50px; 72 padding-top: 45px; 73 padding-left: 41px; 74 background: var(--dark-background3,#FFFFFF); 75 font-size:16px; 76 border-radius: 0px 16px 16px 0px; 77 overflow-y: auto; 78} 79.record-mode{ 80 font-family: Helvetica-Bold; 81 font-size: 16px; 82 color: var(--dark-color1,#000000); 83 line-height: 28px; 84 font-weight: 700; 85 margin-bottom: 16px; 86} 87.record{ 88 display:flex; 89 flex-direction: column; 90} 91 92.buffer-size{ 93 height: min-content; 94} 95 96.max-duration{ 97 height: min-content; 98} 99 100#litradio{ 101 opacity: 0.9; 102 font-family: Helvetica; 103 font-size: 14px; 104 color: var(--dark-color1,#000000); 105 text-align: left; 106 line-height: 16px; 107 font-weight: 400; 108} 109 110</style> 111<div class="root"> 112 <div class="record"> 113 <span class="record-mode">Record mode</span> 114 <lit-radio name="Stop when full" dis="round" id="litradio" checked>Stop when full</lit-radio> 115 </div> 116 <div class="buffer-size"> 117 <span class="record-mode">In-memory buffer size</span> 118 <lit-slider id="memory-buffer" open dir="right" custom-slider></lit-slider> 119 </div> 120 <div class="max-duration"> 121 <span class="record-mode" >Max duration</span> 122 <lit-slider id="max-duration" open dir="right" ></lit-slider> 123 </div> 124</div>`; 125 } 126} 127