Commit a5ffea72 by ramdayalmunda

sending request from the background process to avoid CORS

parent f86b8529
var getUserDetails = null var getUserDetails = null
!function () { !function () {
var origin = "http://localhost:3039"
var tutorShotId = null var tutorShotId = null
var imageNumber = 0; var imageNumber = 0;
var recording = false; var recording = false;
var loggedIn = false; var loggedIn = false;
var userDetails = {} var userDetails = {}
console.log('background.js registered', chrome) function sendReq(url=origin, method='GET', body={}, headers={}){
if (url.slice(0,4)!='http') url = origin += `/api${url[0]=='/'?'':'/'}${url}`
return new Promise( (res, rej)=>{
let bodyObj = { ...body }
let headerObj = {
'Content-Type': 'application/json',
...headers
}
fetch( url,{
method: method,
body: JSON.stringify({ ...bodyObj }),
headers: headerObj,
} ).then( async (data)=>{
if ( headerObj['Content-Type']=='application/json' ){
res( await data.json() )
}else{
res(data)
}
} ).catch(err=>{
console.log('fetch err', err)
rej(err)
})
} )
}
function onMessage(request, sender, sendResponse) { function onMessage(request, sender, sendResponse) {
...@@ -120,7 +143,7 @@ var getUserDetails = null ...@@ -120,7 +143,7 @@ var getUserDetails = null
chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
if (tabs && tabs.length) { // if any tab is active if (tabs && tabs.length) { // if any tab is active
var activeTab = tabs[0] var activeTab = tabs[0]
chrome.tabs.captureVisibleTab({ format: "png" }, function (dataUrl) { chrome.tabs.captureVisibleTab({ format: "png" }, async function (dataUrl) {
let message = { let message = {
...userDetails, ...userDetails,
tutorShotOid: tutorShotId, tutorShotOid: tutorShotId,
...@@ -131,6 +154,9 @@ var getUserDetails = null ...@@ -131,6 +154,9 @@ var getUserDetails = null
} }
// to send message to the content instance of the // to send message to the content instance of the
chrome.tabs.sendMessage(activeTab.id, message); chrome.tabs.sendMessage(activeTab.id, message);
console.log('to take screenshot', message)
let data = await sendReq('/tutor-shot/screen-shot', 'POST', message)
console.log('sent to server', data)
}) })
} }
}) })
......
...@@ -7,11 +7,10 @@ var startingOverlay = null; ...@@ -7,11 +7,10 @@ var startingOverlay = null;
var overlayInterval = null; var overlayInterval = null;
const origin = "http://localhost:3039" const origin = "http://localhost:3039"
var userDetails = {}; var userDetails = {};
var btn = {} var btn = {};
var tutorShotOid = null;
!(async function () { !(async function () {
loadFont('tutor-shot-calibri', `${origin}/assets/fonts/calibri-regular.ttf`, 'truetype')
if (window.origin == origin) login() if (window.origin == origin) login()
let styleTag = document.createElement('style') let styleTag = document.createElement('style')
...@@ -37,7 +36,7 @@ var btn = {} ...@@ -37,7 +36,7 @@ var btn = {}
all: unset; all: unset;
position: fixed; position: fixed;
bottom: 30px; bottom: 30px;
width: 50px; /* width: 50px; */
height: 50px; height: 50px;
z-index: 100; z-index: 100;
background: #fff; background: #fff;
...@@ -46,8 +45,7 @@ var btn = {} ...@@ -46,8 +45,7 @@ var btn = {}
box-shadow: 0px 0px 20px #cccccc; box-shadow: 0px 0px 20px #cccccc;
display: flex; display: flex;
align-items: center; align-items: center;
/* font-family: 'tutor-shot-calibri'; */ font-family: Arial, Helvetica, sans-serif;
font-family: 'sans serif';
transition: 0.3s; transition: 0.3s;
} }
...@@ -55,15 +53,14 @@ var btn = {} ...@@ -55,15 +53,14 @@ var btn = {}
right: 30px; right: 30px;
transition: 0.5s; transition: 0.5s;
} }
.tutor-shot.tutor-shot-left { .tutor-shot.tutor-shot-left {
left: 30px; left: 30px;
transition: 0.5s; transition: 0.5s;
} }
.tutor-shot:hover { .tutor-shot.tutor-shot-left {
width: 420px; left: 30px;
cursor: pointer; transition: 0.5s;
} }
.tutor-shot .counter-count { .tutor-shot .counter-count {
...@@ -99,7 +96,6 @@ var btn = {} ...@@ -99,7 +96,6 @@ var btn = {}
display: flex; display: flex;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
width: 420px;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
...@@ -109,6 +105,7 @@ var btn = {} ...@@ -109,6 +105,7 @@ var btn = {}
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 16px; margin-right: 16px;
transition: 0.3s;
} }
.tutor-shot .content .item .img { .tutor-shot .content .item .img {
...@@ -132,7 +129,7 @@ var btn = {} ...@@ -132,7 +129,7 @@ var btn = {}
document.body.append(floatingBar) document.body.append(floatingBar)
let innerHTML = /*html*/` let innerHTML = /*html*/`
<div class="counter-count" tutor-shot="counter">1</div> <div class="counter-count" tutor-shot="counter" style="display:none;"></div>
<div class="logo"> <div class="logo">
<img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40"> <img class="logo-img" src="${origin}/assets/images/tutor-shot-48.png" width="40">
</div> </div>
...@@ -157,7 +154,7 @@ var btn = {} ...@@ -157,7 +154,7 @@ var btn = {}
<img class="img" src="${origin}/assets/icons/capture.svg" width="20"> <img class="img" src="${origin}/assets/icons/capture.svg" width="20">
<span class="item-text">CAPTURE</span> <span class="item-text">CAPTURE</span>
</div> </div>
<div class="item" tutor-shot="capture-btn"> <div class="item" tutor-shot="switch-btn">
<img class="img" src="${origin}/assets/icons/left-arrow-to-left.svg" width="20"> <img class="img" src="${origin}/assets/icons/left-arrow-to-left.svg" width="20">
</div> </div>
</div> </div>
...@@ -165,6 +162,13 @@ var btn = {} ...@@ -165,6 +162,13 @@ var btn = {}
` `
floatingBar.innerHTML = innerHTML floatingBar.innerHTML = innerHTML
floatingBar.addEventListener('mouseenter', (e) => {
floatingBar.style.width = ''
})
floatingBar.addEventListener('mouseleave', (e) => {
floatingBar.style.width = '50px'
})
document.addEventListener("visibilitychange", async function () { document.addEventListener("visibilitychange", async function () {
if (document.visibilityState === 'visible') { if (document.visibilityState === 'visible') {
...@@ -192,6 +196,7 @@ async function login() { ...@@ -192,6 +196,7 @@ async function login() {
async function getCaptureData() { async function getCaptureData() {
let statusData = await chrome.runtime.sendMessage({ action: "checkStatus" }) let statusData = await chrome.runtime.sendMessage({ action: "checkStatus" })
userDetails = statusData.userDetails userDetails = statusData.userDetails
tutorShotOid = statusData.tutorShotOid
return statusData return statusData
} }
...@@ -226,6 +231,10 @@ function reRenderFloatingBar(data) { ...@@ -226,6 +231,10 @@ function reRenderFloatingBar(data) {
btn.restart = document.querySelector('[tutor-shot="restart-btn"]') btn.restart = document.querySelector('[tutor-shot="restart-btn"]')
btn.restart.addEventListener('click', restartRecording) btn.restart.addEventListener('click', restartRecording)
} }
if (!btn.switch) {
btn.switch = document.querySelector('[tutor-shot="switch-btn"]')
btn.switch.addEventListener('click', changeBarPosition)
}
if (!btn.counter) btn.counter = document.querySelector('[tutor-shot="counter"]') if (!btn.counter) btn.counter = document.querySelector('[tutor-shot="counter"]')
if (data?.hasOwnProperty('imageNumber')) { if (data?.hasOwnProperty('imageNumber')) {
...@@ -296,13 +305,17 @@ window.addEventListener('mousedown', async function (e) { ...@@ -296,13 +305,17 @@ 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) {
console.log('message received', message)
if (message.action == 'tabChanged') { if (message.action == 'tabChanged') {
// console.log('tabChanged', message) // console.log('tabChanged', message)
} }
if (message.status) { if (message.status) {
console.log('got message status', message) console.log('got message status', message)
} }
if (message.action == 'SSCaptured') {
console.log('to capture SS')
// let data = await api.post("/tutor-shot/screen-shot", message)
}
let data = await getCaptureData() let data = await getCaptureData()
reRenderFloatingBar(data) reRenderFloatingBar(data)
if (message.message == 'recordingStarted') { if (message.message == 'recordingStarted') {
...@@ -343,7 +356,6 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon ...@@ -343,7 +356,6 @@ chrome.runtime.onMessage.addListener(async function (message, sender, sendRespon
async function startRecording() { async function startRecording() {
console.log('startRecording')
try { try {
await getCaptureData(); await getCaptureData();
let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } }) let { data } = await api.post('/tutor-shot', { title: "Some random title" }, { headers: { userId: userDetails.uid } })
...@@ -364,36 +376,32 @@ async function resumeRecording() { ...@@ -364,36 +376,32 @@ async function resumeRecording() {
} }
async function stopRecording() { async function stopRecording() {
try {
await api.post('/tutor-shot/finalize', { _id: tutorShotOid }, { headers: { userid: userDetails.uid } })
await chrome.runtime.sendMessage({ action: "stopRecording" }) await chrome.runtime.sendMessage({ action: "stopRecording" })
} catch (err) {
console.log(err)
}
} }
async function restartRecording() { async function restartRecording() {
try {
await api.delete('/tutor-shot/segments', { params: { tutorShotOid: tutorShotOid } })
await chrome.runtime.sendMessage({ action: "restartRecording" }) await chrome.runtime.sendMessage({ action: "restartRecording" })
try{ } catch (err) {
let captureData = await getCaptureData()
await api.delete('/tutor-shot/segments', { params: {tutorShotOid: captureData.tutorShotOid} })
}catch(err){
console.log(err) console.log(err)
} }
} }
async function checkFont(fontName) { // Use FontFace API to check if the font is available function changeBarPosition() {
try { let sidebarPosition = floatingBar.classList.contains('tutor-shot-right')
await document.fonts.load('1em ' + fontName); // Attempt to load the font if (sidebarPosition) {
return true; // Font successfully loaded floatingBar.classList.add('tutor-shot-left')
} catch (error) { floatingBar.classList.remove('tutor-shot-right')
return false; // Font couldn't be loaded btn.switch.style.transform = "rotate(180deg)"
} else {
btn.switch.style.transform = ""
floatingBar.classList.remove('tutor-shot-left')
floatingBar.classList.add('tutor-shot-right')
} }
} }
async function loadFont(name, url, type='true'){
return new Promise( (res, rej)=>{
// this is load custom font
let customFont = new FontFace(name, `url(${url}) format("${type}")`)
customFont.load().then(function (font) {
document.fonts.add(font);
res(true)
})
} )
}
\ No newline at end of file
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