Skip to content

T
tutor-shot-extension
Commit 9d806564 by ramdayalmunda
Options

added loader when stopping a recording.

parent 24f82e49
Showing with 61 additions and 26 deletions
background.js
var getUserDetails = null
!function () {
var origin = "https://begenieus.com"
var origin = "http://localhost:3039"
var tutorShotId = null
var imageNumber = 0;
var recording = false;
var loggedIn = false;
var userDetails = {}
var generatingVideo = false;
function setData(key, value, callback) {
......@@ -51,6 +52,10 @@ var getUserDetails = null
}
})
function getStatus(){
return tutorShotId ? (generatingVideo?'generatingVideo':recording ? "recording" : "paused"):"stopped"
}
function createAPI(origin) {
var baseURL = origin
......@@ -191,7 +196,7 @@ var getUserDetails = null
userDetails,
tutorShotOid: tutorShotId,
imageNumber: imageNumber,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped",
status: getStatus(),
})
sendMessageToActiveTab("loggedIn")
......@@ -209,7 +214,7 @@ var getUserDetails = null
recording,
tutorShotOid: tutorShotId,
imageNumber: imageNumber,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
status: getStatus()
})
return
}
......@@ -222,7 +227,7 @@ var getUserDetails = null
userDetails,
loggedIn,
recording,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
status: getStatus()
});
sendMessageToActiveTab("recordingStarted")
setData("recording", true)
......@@ -236,7 +241,7 @@ var getUserDetails = null
userDetails,
loggedIn,
recording,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
status: getStatus()
});
sendMessageToActiveTab("recordingPaused")
setData("recording", false)
......@@ -248,22 +253,25 @@ var getUserDetails = null
userDetails,
loggedIn,
recording,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
status: getStatus()
});
sendMessageToActiveTab("recordingResumed")
setData("recording", true)
return
}
if (loggedIn && request.action === 'stopRecording') {
await api.post('/tutor-shot/finalize', { _id: tutorShotId }, { headers: { userid: userDetails.uid } })
generatingVideo = true
recording = false;
tutorShotId = null
sendResponse({
userDetails,
loggedIn,
recording,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
status: getStatus()
});
sendMessageToActiveTab("generatingVideo")
await api.post('/tutor-shot/finalize', { _id: tutorShotId }, { headers: { userid: userDetails.uid } })
generatingVideo = false
tutorShotId = null
sendMessageToActiveTab("recordingStopped")
setData("recording", false)
setData("imageNumber", 0)
......@@ -274,6 +282,7 @@ var getUserDetails = null
if (request.action === 'logout') {
loggedIn = false;
recording = false;
generatingVideo = false;
userDetails = {};
tutorShotId = null;
imageNumber = 0;
......@@ -283,13 +292,12 @@ var getUserDetails = null
recording,
status: "stopped"
});
sendMessageToActiveTab("recordingStopped")
sendMessageToActiveTab("loggedOut")
setData("recording", false)
setData("imageNumber", 0)
setData("tutorShotId", null)
setData("userDetails", {})
setData("loggedIn", false)
// setData()
return
}
if (loggedIn && request.action === 'restartRecording') {
......@@ -298,7 +306,7 @@ var getUserDetails = null
userDetails,
loggedIn,
recording,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped"
status: getStatus()
});
await api.delete('/tutor-shot/segments', { params: { tutorShotOid: tutorShotId } })
sendMessageToActiveTab("recordingRestarted")
......@@ -325,7 +333,7 @@ var getUserDetails = null
tutorShotOid: tutorShotId,
action: 'SSCaptured',
dataUrl: dataUrl, imageNumber: imageNumber++,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped",
status: getStatus(),
...request.captureInfo ? request.captureInfo : {}
}
setData("imageNumber", imageNumber)
......@@ -362,10 +370,10 @@ var getUserDetails = null
userDetails,
tutorShotOid: tutorShotId,
imageNumber: imageNumber,
status: tutorShotId ? (recording ? "recording" : "paused") : "stopped",
status: getStatus(),
message: messageObj
}
chrome.tabs.sendMessage(activeTab.id, message);
chrome.tabs.sendMessage(activeTab?.id, message);
}
})
} catch (err) {
......
content.js
......@@ -5,7 +5,7 @@ var loggedIn = false;
var floatingBar = null;
var startingOverlay = null;
var overlayInterval = null;
const origin = "https://begenieus.com"
const origin = "http://localhost:3039"
var userDetails = {};
var btn = {};
var tutorShotOid = null;
......@@ -86,9 +86,11 @@ var tutorShotOid = null;
}
.tutor-shot .logo .logo-img {
display: block;
all: unset;
margin-top: -4px;
margin-left: -1px;
height: 50px;
}
.tutor-shot .content {
......@@ -106,6 +108,7 @@ var tutorShotOid = null;
align-items: center;
margin-right: 16px;
transition: 0.3s;
cursor: pointer;
}
.tutor-shot .content .item .img {
......@@ -119,6 +122,10 @@ var tutorShotOid = null;
all: unset;
padding-top: 2px;
}
.tutor-shot .content .item.width-100 {
width: 100%;
background: red;
}
`
styleTag.innerHTML = styleString
......@@ -131,7 +138,8 @@ var tutorShotOid = null;
<div class="counter-count" tutor-shot="counter" style="display:none;"></div>
<div class="logo">
<img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
<img tutor-shot="main-logo" class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
<img tutor-shot="generating-video" class="logo-img" src="${origin}/assets/images/logo-loader.gif" width="40">
</div>
<div class="content">
<div class="item" tutor-shot="play-btn">
......@@ -204,7 +212,8 @@ function reRenderFloatingBar(data) {
if (data.status == 'stopped') {
floatingBar.remove()
return
} else if (!document.body.contains(floatingBar)) {
}
else if (!document.body.contains(floatingBar)) {
document.body.append(floatingBar)
}
}
......@@ -212,6 +221,12 @@ function reRenderFloatingBar(data) {
btn.play = document.querySelector('[tutor-shot="play-btn"]')
btn.play.addEventListener('click', resumeRecording)
}
if (!btn.mainLogo){
btn.mainLogo = document.querySelector('[tutor-shot="main-logo"]')
}
if (!btn.generatingVideo){
btn.generatingVideo = document.querySelector('[tutor-shot="generating-video"]')
}
if (!btn.capture) {
btn.capture = document.querySelector('[tutor-shot="capture-btn"]')
}
......@@ -244,23 +259,34 @@ function reRenderFloatingBar(data) {
btn.pause.style.display = 'none'
btn.stop.style.display = 'flex'
btn.restart.style.display = 'flex'
// btn.capture.style.display = 'flex'
btn.generatingVideo.style.display = 'none'
btn.mainLogo.style.display = 'block'
}
else if (data?.status == 'recording') {
btn.play.style.display = 'none'
btn.pause.style.display = 'flex'
btn.restart.style.display = 'flex'
btn.stop.style.display = 'flex'
btn.generatingVideo.style.display = 'none'
btn.mainLogo.style.display = 'block'
// btn.capture.style.display = 'flex'
}
else if ( data?.status == 'generatingVideo' ){
btn.play.style.display = 'none'
btn.pause.style.display = 'none'
btn.stop.style.display = 'none'
btn.restart.style.display = 'none'
btn.generatingVideo.style.display = 'block'
btn.mainLogo.style.display = 'none'
}
else { // stopped
btn.play.style.display = 'flex'
btn.pause.style.display = 'none'
btn.stop.style.display = 'none'
btn.restart.style.display = 'none'
// btn.capture.style.display = 'none'
btn.generatingVideo.style.display = 'none'
btn.mainLogo.style.display = 'block'
}
// floatingBar.innerHTML = innerHTML
}
var recording = false;
......@@ -300,7 +326,6 @@ window.addEventListener('mousedown', async function (e) {
})
// content.js
chrome.runtime.onMessage.addListener(async function (message, sender, sendResponse) {
if (message.action == 'tabChanged') {
// console.log('tabChanged', message)
}
......@@ -338,7 +363,10 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
}
}
if (message.message == 'recordingStopped') {
else if (message.message == 'generatingVideo') {
reRenderFloatingBar(data)
}
else if (message.message == 'recordingStopped') {
window.open(`${origin}/tutor-shot-list`)
}
......
manifest.json
......@@ -2,7 +2,7 @@
"manifest_version": 3,
"name": "Tutor Shot",
"version": "1.0",
"description": "Capture web-page screenshots instantly with a single click. They're saved to your account at https://begenieus.com.",
"description": "Capture web-page screenshots instantly with a single click. They're saved to your account at http://localhost:3039.",
"permissions": [
"activeTab",
"storage"
......
popup.js
!function () {
const origin = "https://begenieus.com"
const origin = "http://localhost:3039"
const api = axios.create({
baseURL: `${origin}/api`, // the base URL for nodeserver is okay but NGINX is giving error
......@@ -88,7 +88,6 @@
function domLoadHandler() {
chrome.runtime.sendMessage({ action: "checkStatus" }, function (response) {
console.log('response',response)
userDetails = response.userDetails;
loggedIn = response.loggedIn,
recording = response.recording
......
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