Commit 6a3f96aa by ramdayalmunda

loader added when starting

parent e7571e72
...@@ -77,7 +77,7 @@ var getUserDetails = null ...@@ -77,7 +77,7 @@ var getUserDetails = null
recording, recording,
status: tutorShotId?(recording?"recording":"paused"):"stopped" status: tutorShotId?(recording?"recording":"paused"):"stopped"
}); });
sendMessageToActiveTab("recordingPaused") sendMessageToActiveTab("recordingResumed")
return return
} }
if (loggedIn && request.action === 'stopRecording') { if (loggedIn && request.action === 'stopRecording') {
......
...@@ -3,6 +3,8 @@ ...@@ -3,6 +3,8 @@
*/ */
var loggedIn = false; var loggedIn = false;
var floatingBar = null; var floatingBar = null;
var startingOverlay = null;
var overlayInterval = null;
const origin = "http://localhost:3039" const origin = "http://localhost:3039"
var userDetails = {}; var userDetails = {};
var btn = {} var btn = {}
...@@ -19,7 +21,22 @@ var btn = {} ...@@ -19,7 +21,22 @@ var btn = {}
let styleTag = document.createElement('style') let styleTag = document.createElement('style')
styleTag.setAttribute('tutor-shot-style', '') styleTag.setAttribute('tutor-shot-style', '')
styleString = /*css*/` styleString = /*css*/`
.tutor-shot-overlay{
all: unset;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background-color: #000000a0;
pointer-events: inherit;
z-index: 101;
display: flex;
color: white;
justify-content: center;
align-items: center;
font-size: 28px;
}
.tutor-shot { .tutor-shot {
all: unset; all: unset;
position: fixed; position: fixed;
...@@ -256,7 +273,7 @@ const api = axios.create({ ...@@ -256,7 +273,7 @@ const api = axios.create({
window.addEventListener('mousedown', async function (e) { window.addEventListener('mousedown', async function (e) {
// to prevent the event when clicking inside the floating bar // to prevent the event when clicking inside the floating bar
if (floatingBar.contains(e.target)){ if (floatingBar?.contains(e.target) || startingOverlay?.contains(e.target)){
return return
} }
if (e.button === 0) { // only left click allowed if (e.button === 0) { // only left click allowed
...@@ -282,14 +299,7 @@ window.addEventListener('mousedown', async function (e) { ...@@ -282,14 +299,7 @@ window.addEventListener('mousedown', async function (e) {
// content.js // content.js
chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) { chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
if (message.action == 'SSCaptured') {
console.log('SSCaptured', message)
// api.post("/tutor-shot/screen-shot", message).then(res => {
// console.log('response', res)
// }).catch(err => {
// console.log('err', err)
// })
}
if (message.action == 'tabChanged') { if (message.action == 'tabChanged') {
// console.log('tabChanged', message) // console.log('tabChanged', message)
} }
...@@ -298,6 +308,36 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon ...@@ -298,6 +308,36 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
} }
let data = await getCaptureData() let data = await getCaptureData()
reRenderFloatingBar(data) reRenderFloatingBar(data)
if (message.message == 'recordingStarted'){
if (floatingBar){
if(!startingOverlay){
clearInterval(overlayInterval)
let counter = 5
startingOverlay = document.createElement('div')
startingOverlay.setAttribute('class', 'tutor-shot-overlay')
document.body.append(startingOverlay)
function changeText(){
if (counter<=0){
clearInterval(overlayInterval)
startingOverlay.remove()
return
}
console.log('counter', counter)
startingOverlay.innerHTML = `
<div>
Click on the webpage to take screenshot
<br>
Capture would start in ${counter--} seconds
</div>
`
}
changeText()
overlayInterval = setInterval(changeText, 1000 )
}
}
}
}); });
......
...@@ -111,7 +111,7 @@ ...@@ -111,7 +111,7 @@
<div id="user-details"> <div id="user-details">
<div style=" background-color: #fff4e3;border-bottom:1px solid #f0f0f0;padding:16px;display:flex;"> <div style=" background-color: #fff4e3;border-bottom:1px solid #f0f0f0;padding:16px;display:flex;">
<div style="display: flex; justify-content:space-between;align-items: center; width: 100%;"> <div style="justify-content:space-between;align-items: center; width: 100%;">
<div style="display: flex;align-items: center;flex: 1;"> <div style="display: flex;align-items: center;flex: 1;">
<img src="./images/photo.jpg" alt=""style="border: 2px solid #fff;;border-radius: 50%; <img src="./images/photo.jpg" alt=""style="border: 2px solid #fff;;border-radius: 50%;
height: 32px;margin-right: 8px;max-width: 50px;overflow: hidden;width: 32px;"> height: 32px;margin-right: 8px;max-width: 50px;overflow: hidden;width: 32px;">
...@@ -125,7 +125,7 @@ ...@@ -125,7 +125,7 @@
</div> </div>
</div> </div>
<div style="display: flex;align-items: center;"> <div style="display: flex;align-items: center;">
<button id="my-captures-btn" type="button" style="background-color: #f36418;background-image: linear-gradient(150deg,#f36418 19%, #fc9c2a 75%);border: none;cursor: pointer;border-radius:6px;font-size: 14px;font-weight: 600;height:30px;padding: 8px 12px;align-items: center;justify-content: center;color: #fff;display: flex; text-decoration: none;">My Captures <button id="my-captures-btn" type="button" style="background-color: #f36418;background-image: linear-gradient(150deg,#f36418 19%, #fc9c2a 75%);border: none;cursor: pointer;border-radius:6px;font-size: 14px;font-weight: 600;height:30px;padding: 8px 12px;align-items: center;justify-content: center;color: #fff;display: flex; text-decoration: none; margin-left: 40px; margin-top: 10px;">My Captures
</button> </button>
</div> </div>
</div> </div>
......
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