Camera/dbScript.js at main · Vansh-Gupta4/Camera · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
let request = indexedDB.open("Camera", 1);
let db;

request.onsuccess = function (e) {
  db = request.result;
};

request.onerror = function (e) {
  console.log("error");
};

request.onupgradeneeded = function (e) {
  db = request.result;
  db.createObjectStore("gallery", { keyPath: "mId" });
};

function addMediaToGallery(data, type) {
  let tx = db.transaction("gallery", "readwrite");
  let gallery = tx.objectStore("gallery");
  gallery.add({ mId: Date.now(), type, media: data });
}

function viewMedia() {
  let body = document.querySelector("body");
  let tx = db.transaction("gallery", "readonly");
  let gallery = tx.objectStore("gallery");
  let req = gallery.openCursor();
  req.onsuccess = function (e) {
    let cursor = req.result;
    if (cursor) {
      if (cursor.value.type == "video") {  //agar video hui

        let vidContainer = document.createElement("div"); //video-container  ban gya
        vidContainer.setAttribute("data-mId", cursor.value.mId);
        vidContainer.classList.add("gallery-vid-container");
        let video = document.createElement("video"); //video tag bana diya
        vidContainer.appendChild(video); //video tag ko video container se append kar diya

        let deleteBtn = document.createElement("button"); //create delete btn
        deleteBtn.classList.add("gallery-delete-button");
        deleteBtn.innerText = "Delete";
        deleteBtn.addEventListener("click", deleteItem);

        let downloadBtn = document.createElement("button");//create download btn
        downloadBtn.classList.add("gallery-download-button");
        downloadBtn.innerText = "Download";
        downloadBtn.addEventListener("click", donwloadItem);

        vidContainer.appendChild(deleteBtn);//append to video container
        vidContainer.appendChild(downloadBtn);//append to video container

        video.autoplay = true;
        video.controls = true;
        video.loop = true;
        video.src = window.URL.createObjectURL(cursor.value.media);
        body.appendChild(vidContainer);

      } else {      //agar image hui

        let imgContainer = document.createElement("div");//img-container  ban gya
        imgContainer.setAttribute("data-mId", cursor.value.mId);
        imgContainer.classList.add("gallery-img-container")
        let img = document.createElement("img");//img tag bann gya
        img.src = cursor.value.media;
        imgContainer.appendChild(img);//img tag ko img container ke attach karva diya

        let deleteBtn = document.createElement("button");
        deleteBtn.classList.add("gallery-delete-button");
        deleteBtn.innerText = "Delete";
        deleteBtn.addEventListener("click", deleteItem);

        let downloadBtn = document.createElement("button");
        downloadBtn.classList.add("gallery-download-button");
        downloadBtn.innerText = "Download";
        downloadBtn.addEventListener("click", donwloadItem);

        imgContainer.appendChild(deleteBtn);
        imgContainer.appendChild(downloadBtn);
        body.appendChild(imgContainer);
      }
      cursor.continue();
    }
  };
}


function deleteMediaFromGallery(mId) {
  let tx = db.transaction("gallery", "readwrite");
  let gallery = tx.objectStore("gallery");
  //Typecasting to a number is imp because we have stored Date.now() which gives us a number
  gallery.delete(Number(mId));
}


function deleteItem(e) {
  let mId = e.currentTarget.parentNode.getAttribute("data-mId");
  deleteMediaFromGallery(mId);
  e.currentTarget.parentNode.remove();
}

function donwloadItem(e) {
  let a = document.createElement("a");
  a.href = e.currentTarget.parentNode.children[0].src;
  // checks if the element is video or img so that we can define the extension
  if (e.currentTarget.parentNode.children[0].nodeName == "IMG") {
    a.download = "image.png";
  } else {
    a.download = "video.mp4";
  }
  a.click()
  a.remove()
}