Commit fd89e144 by ramdayalmunda

floating bar created

parent a56d284c
...@@ -5,19 +5,139 @@ var loggedIn = false; ...@@ -5,19 +5,139 @@ var loggedIn = false;
var floatingBar = null var floatingBar = null
!(function () { !(function () {
let origin = "http://localhost:3039" let origin = "http://localhost:3039"
// this is load custom font
let customFont = new FontFace('tutor-shot-calibri', "http://localhost:3039/assets/fonts/calibri-regular.ttf")
customFont.load().then(function (font) {
document.fonts.add(font);
})
if (window.origin == origin) login() if (window.origin == origin) login()
floatingBar = document.createElement('div')
floatingBar.setAttribute('style', ` let styleTag = document.createElement('style')
position:fixed; styleTag.setAttribute('tutor-shot-style', '')
bottom:0; styleString = `
width:100vw;
z-index:100; .tutor-shot {
background: linear-gradient(45deg, #ffb102, transparent); all: unset;
margin: 40px; position: fixed;
bottom: 30px;
width: 50px;
height: 50px;
z-index: 100;
background: #fff;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 50px;
`) box-shadow: 0px 0px 20px #cccccc;
display: flex;
align-items: center;
font-family: 'calibri';
transition: 0.3s;
}
.tutor-shot.tutor-shot-right {
right: 30px;
transition: 0.5s;
}
.tutor-shot.tutor-shot-left {
left: 30px;
transition: 0.5s;
}
.tutor-shot:hover {
width: 420px;
cursor: pointer;
}
.tutor-shot .counter-count {
all: unset;
min-width: 16px;
border-radius: 50px;
background-color: rgb(3, 153, 28);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 600;
position: absolute;
right: 0px;
top: -7px;
z-index: 2;
padding: 4px;
}
.tutor-shot .logo {
all: unset;
}
.tutor-shot .logo .logo-img {
all: unset;
margin-top: -4px;
margin-left: -1px;
}
.tutor-shot .content {
all: unset;
display: flex;
align-items: center;
overflow: hidden;
width: 420px;
}
.tutor-shot .content .item {
all: unset;
display: flex;
align-items: center;
margin-right: 16px;
}
.tutor-shot .content .item .img {
all: unset;
margin-right: 3px;
filter: hue-rotate(335deg) brightness(0%) contrast(68%);
width: 20px;
}
.tutor-shot .content .item .item-text {
all: unset;
}
`
styleTag.innerHTML = styleString
document.body.append(styleTag)
floatingBar = document.createElement('div')
floatingBar.setAttribute('class', `tutor-shot tutor-shot-right`)
document.body.append(floatingBar) document.body.append(floatingBar)
let innerHTML = /*html*/`
<div class="counter-count">1</div>
<div class="logo">
<img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
</div>
<div class="content">
<div class="item">
<img class="img" src="${origin}/assets/icons/pause.svg" width="20">
<span class="item-text">PAUSE</span>
</div>
<div class="item">
<img class="img" src="${origin}/assets/icons/stop-circle.svg" width="20">
<span class="item-text">STOP</span>
</div>
<div class="item">
<img class="img" src="${origin}/assets/icons/redo.svg" width="20">
<span class="item-text">RESTART</span>
</div>
<div class="item">
<img class="img" src="${origin}/assets/icons/capture.svg" width="20">
<span class="item-text">CAPTURE</span>
</div>
</div>
`
floatingBar.innerHTML = innerHTML
document.addEventListener("visibilitychange", function () { document.addEventListener("visibilitychange", function () {
if (document.visibilityState === 'visible') { if (document.visibilityState === 'visible') {
...@@ -42,7 +162,7 @@ function login() { ...@@ -42,7 +162,7 @@ function login() {
} }
} }
function getCaptureData(){ function getCaptureData() {
return { return {
SSTaken: 28, SSTaken: 28,
state: "paused" state: "paused"
...@@ -50,15 +170,9 @@ function getCaptureData(){ ...@@ -50,15 +170,9 @@ function getCaptureData(){
} }
function reRenderFloatingBar(ssTaken, state) { function reRenderFloatingBar(ssTaken, state) {
console.log('reset floting bar data')
let innerHTML = /*html*/` // floatingBar.innerHTML = innerHTML
<span>${ssTaken?ssTaken:0} SS taken</span>
${state=='paused'?'<button>Play</button>':''}
<button>SS</button>
`
floatingBar.innerHTML = innerHTML
} }
var recording = false; var recording = false;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment