Commit a5ffea72 by ramdayalmunda

sending request from the background process to avoid CORS

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