discord + spotify progress

package-lock.json

@@ -2478,6 +2478,32 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "@widgetbot/embed-api": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@widgetbot/embed-api/-/embed-api-1.1.3.tgz",
+      "integrity": "sha1-x/2AadfOLsd0DYv0FAx4bGNvs9Y="
+    },
+    "@widgetbot/react-embed": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@widgetbot/react-embed/-/react-embed-1.4.0.tgz",
+      "integrity": "sha512-rN/zyv8ndn+I3g1fCMql2NN+2Yn04XVhwL1GHQlSKEvFWNXsqEDyXO1MaDxcvJFcG7cSQLRTcvgVWzAVe+3Fag==",
+      "requires": {
+        "@widgetbot/embed-api": "^1.1.3",
+        "react": "^16.13.1"
+      },
+      "dependencies": {
+        "react": {
+          "version": "16.14.0",
+          "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+          "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1",
+            "prop-types": "^15.6.2"
+          }
+        }
+      }
+    },
     "@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "@widgetbot/react-embed": "^1.4.0",
     "axios": "^0.21.1",
     "node-sass": "^6.0.1",
     "react": "^17.0.2",

src/containers/applications/apps/assets/songs.json

@@ -32,20 +32,24 @@
           "data": ["tUjXvoKS","tO4KdkvZ","ZScWgymd","6IUC2JRX","ig1HkOTh",
                   "gSJ7LtZz","2DxytgUN","rkpNHSo1","SxdL_VN6","E0XUOgb0"]
         }, {
-          "type": "cstm",
+          "type": "mix",
           "img": "http://c.saavncdn.com/editorial/JhankarBeats_saavn_radio_20201215120219_500x500.jpg",
           "name": "Discover weekly",
-          "desc": "Your weekly mixtape of fresh music. Enjoy new music and deep cuts picked for you. Updates every Monday."
+          "desc": "Your weekly mixtape of fresh music. Enjoy new music and deep cuts picked for you. Updates every Monday.",
+          "data": ["bniN_G_9","k0pZ9SOq","lteSMrqT","dPE6CaaW","-5HuljV0","izo8AG5O"]
         }, {
-          "type": "cstm",
+          "type": "mix",
           "img": "http://c.saavncdn.com/editorial/Chill_saavn_radio_500x500.jpg",
           "name": "Chill station",
-          "desc": "Arrive! Your one stop shop to relax and groove."
+          "desc": "Arrive! Your one stop shop to relax and groove.",
+          "data": ["1ZbsmMvx","49_6hqO9","sEdO8hht","QUNHFVVV",
+                  "VM_1g4L3", "djov7ptD","GQDz4Ji6","4o2SQj5_"]
         }, {
           "type": "mix",
           "img": "http://c.saavncdn.com/artists/Taylor_Swift_150x150.jpg",
           "name": "Daily Mix 5",
-          "desc": "Taylor Swift, Katy Perry, Sara Kays and more"
+          "desc": "Taylor Swift, Katy Perry, Sophia Somajo and more",
+          "data": ["ywYcM5y0","CW0maQeQ","Bx-MHJzW","r1L8gMRa","3zP4JQOU"]
         }
       ]
     },
@@ -74,6 +78,12 @@
         "name": "RISE",
         "desc": "By WILLOW, Jahnavi Harrison",
         "data": "23601363"
+      },{
+        "type": "album",
+        "img": "https://c.saavncdn.com/019/Still-Here-Hindi-2021-20210309211207-500x500.jpg",
+        "name": "Still Here",
+        "desc": "KR$NA",
+        "data": "25817358"
       }]
     },
     {
@@ -891,7 +901,7 @@
   "playlist": [
     {
       "type": "play",
-      "img": "http://c.saavncdn.com/artists/Arijit_Singh_500x500.jpg",
+      "img": "/img/asset/hindi.jpg",
       "name": "Hindi",
       "desc": "Created by blueedge",
       "data": ["jZj6FxTn","lWfLyI7Q","1EvZOLZA","7pyE_xRk","Vnpn-XBN","sRfXrLI3",
@@ -900,17 +910,20 @@
     },
     {
       "type": "play",
-      "img": "http://c.saavncdn.com/artists/Arijit_Singh_500x500.jpg",
+      "img": "/img/asset/english.jpg",
       "name": "English",
       "desc": "Created by blueedge",
-      "data": ["m6DcVXHw"]
+      "data": ["Qh1CjVg7","bodW4p3V","TEG8c_EJ","Mej5z1fx","TS2O2Tve","3g5G9QTu",
+        "vMVZNcBe","j8hvJDPs","QW2Cc9f_","2DxytgUN","lkuNi3jw","ob5CYzSj",
+        "StDihZvc","r18ZGRhZ","w45WxXVs","SCViGhWY","hRwARnmN","NcZREsTd"]
     },
     {
       "type": "play",
-      "img": "http://c.saavncdn.com/artists/Arijit_Singh_500x500.jpg",
+      "img": "/img/asset/community.jpg",
       "name": "Community",
       "desc": "Created by community",
-      "data": ["1F6WUTJk"]
+      "data": ["mPk9X_H_","gy17KLcd","VD6u6NAU","0v8zw64U","-flLKGvp","4J4hpD8f",
+            "6-xaXxqJ","b5X96rOy"]
     }
   ]
 }

src/containers/applications/apps/assets/spotify.scss

@@ -1,5 +1,6 @@
 .spotify .windowScreen {
   font-family: 'Spotify', sans-serif;
+  cursor: default;
 }
 
 .spnav {
@@ -574,3 +575,26 @@
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 }
+
+.thiker{
+  -webkit-text-stroke-width: 2px;
+  letter-spacing: 2px;
+  max-height: 48px;
+}
+
+.topcard{
+  background: #222;
+  border-radius: 4px;
+
+  .imageCont{
+    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.4);
+  }
+}
+
+.srCont {
+  border-radius: 6px;
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+}

src/containers/applications/apps/discord.js

@@ -0,0 +1,59 @@
+import React, {useState, useEffect} from 'react';
+import {useSelector, useDispatch} from 'react-redux';
+import {Icon, Image, ToolBar} from '../../../utils/general';
+
+import WidgetBot from '@widgetbot/react-embed';
+
+export const DScord = ()=>{
+  const apps = useSelector(state => state.apps);
+  const wnapp = useSelector(state => state.apps.discord);
+  const [url, setUrl] = useState(null);
+  const dispatch = useDispatch();
+
+  useEffect(()=>{
+    if(url==null){
+      setUrl("https://e.widgetbot.io/channels/868499076432408627/868499076432408631")
+      // setUrl("https://emerald.widgetbot.io/channels/299881420891881473/450428756855750666/?api=e2f9b64f-5292-43f5-a0d8-26fa43447eeb")
+    }
+  })
+
+  return (
+    <div
+      className="discordWn floatTab dpShad" data-size={wnapp.size}
+      data-max={wnapp.max} style={{
+        ...(wnapp.size=="cstm"?wnapp.dim:null),
+        zIndex: wnapp.z
+      }} data-hide={wnapp.hide} id={wnapp.icon+"App"}>
+      <ToolBar app={wnapp.action} icon={wnapp.icon}
+        name="Discord" bg="#282a2f" invert/>
+      <div className="windowScreen flex flex-col" data-dock="true">
+        <div className="restWindow flex-grow flex">
+          <div className="dsbar w-18">
+            <div className="servCont noscroll">
+              <Icon className="dsIcon" src="./img/asset/discord.png" ext width={26}/>
+              <hr/>
+              <Icon className="wnServer svIcon" src="./img/asset/server.gif" click="EXTERNAL"
+                    payload="https://discord.gg/qmEZwUhb4b" ext width={48}/>
+              <Icon className="svIcon" src="./img/asset/arrtective.png" click="EXTERNAL"
+                    payload="https://discord.io/arttective" ext width={48}/>
+              <Icon className="svIcon" src="./img/asset/mimi.png" click="EXTERNAL"
+                    payload="https://discord.gg/AGSCfjgDMc" ext width={48}/>
+              <Icon className="svIcon" src="./img/asset/narjiday.png" click="EXTERNAL"
+                    payload="https://discord.gg/K9wcgZJfXS" ext width={48}/>
+              <Icon className="svIcon" src="./img/asset/lucina.png" click="EXTERNAL"
+                    payload="https://discord.gg/zAypMTH" ext width={48}/>
+            </div>
+          </div>
+          <div className="flex-grow overflow-hidden">
+            {wnapp.hide?null:(
+              <WidgetBot
+                className="w-full h-full"
+                shard={url || ""}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/containers/applications/apps/spotify.js

@@ -6,11 +6,14 @@ import jiosaavn from './assets/jiosaavn';
 import data from './assets/songs.json';
 
 const {round,floor,max,min,random,ceil,abs} = Math;
+String.prototype.to150 = function(){
+  return this.replace("500x500","150x150");
+}
 
 export const Spotify = ()=>{
   const apps = useSelector(state => state.apps);
   const wnapp = useSelector(state => state.apps.spotify);
-  const [tab, setTab] = useState(0);
+  const [tab, setTab] = useState(1);
   const [paused, setPause] = useState(true);
   const [shfle, setShuffle] = useState(0);
   const [mxqueue, setMxq] = useState([]);
@@ -259,12 +262,15 @@ export const Spotify = ()=>{
                     sid={queue[curr] && queue[curr].id}/>:null}
                 {tab==39 || (tab>6 && tab<10)?<Playlist {...{action,paused,action2}}
                   sid={queue[curr] && queue[curr].id} {...playd}/>:null}
+                {tab==1?<Search {...{action,paused,action2}}
+                  sid={queue[curr] && queue[curr].id}/>:null}
               </div>
             </div>
           </div>
           <div className="splayer">
             <div className="snfo flex items-center">
-              {queue[curr].albumArt?<Image src={queue[curr].albumArt} w={56} ext/>:
+              {queue[curr].albumArt?
+                <Image src={queue[curr].albumArt.to150()} w={56} ext/>:
                   <Icon src="./img/asset/album.png" ext width={56}/>}
               <div className="sname ml-3">
                 <div className="text-sm mb-2 text-gray-100 font-semibold"
@@ -331,6 +337,59 @@ export const Spotify = ()=>{
   );
 }
 
+const Search = ({sid, paused, action,action2})=>{
+  const [query, setQuery] = useState("");
+
+  return(
+    <div className="mt-12">
+      <div className="absolute w-full top-0 -mt-8">
+        <div className="flex bg-gray-100 px-4 w-max rounded-full overflow-hidden">
+          <Icon icon="search"/>
+          <input className="ml-2 bg-transparent py-3 rounded-full text-base"
+            defaultValue="Okay" type="text" onChange={e=> setQuery(e.target.value)}/>
+        </div>
+      </div>
+      <div className="flex">
+        <div className="flex flex-col text-gray-100 max-w-2/5">
+          <span className="text-2xl font-black">Recent searches</span>
+          <div className="topcard handcr mt-4 p-5 flex flex-col items-start">
+            <Image src="/img/asset/mix.jpg" ext w={92} err='/img/asset/mixdef.jpg'/>
+            <div className="text-gray-100 mt-6 text-3xl thiker dotdot">
+              BEST OF ARIJIT SINGH
+            </div>
+            <div className="acol mt-1 text-sm font-semibold">
+              Arijit singh
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col text-gray-100 ml-8 flex-grow">
+          <span className="flex justify-between">
+            <span className="text-2xl font-black">Songs</span>
+            <span className="acol font-semibold handcr">see all</span>
+          </span>
+          <div className="mt-4">
+            {data.queue.splice(0,4).map((song, i)=>(
+              <div className="srCont flex p-2 items-center prtclk" onClick={action}
+                data-action="song" data-payload={`"`+song.id+`"`} key={i}>
+                <Image src={song.image.to150()} w={40} ext/>
+                <div className="acol ml-4 flex-grow">
+                  <div className={"capitalize text-gray-100 dotdot font-semibold"+
+                    (sid==song.id?" gcol":"")}
+                    dangerouslySetInnerHTML={{__html: song.song}}></div>
+                  <div className="capitalize dotdot text-sm mt-1 font-semibold"
+                    dangerouslySetInnerHTML={{__html: song.singers}}></div>
+                </div>
+                <div className="acol text-sm font-semibold">
+                  {jiosaavn.formatTime(song.duration)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 const Playlist = ({type, tdata, action, action2, sid, paused})=>{
   const [data, setData] = useState({fake: true});
   const [loaded, setLoaded] = useState(false);
@@ -410,7 +469,7 @@ const Playlist = ({type, tdata, action, action2, sid, paused})=>{
             {sid==song.song_id && !paused?<Icon src="./img/asset/equaliser.gif" ext width={14}/>:null}
 
             <div className="scol1">
-              {ptype?<Image src={song.song_image}
+              {ptype?<Image src={song.song_image.to150()}
                 w={40} h={40} ext err='/img/asset/mixdef.jpg'/>:null}
               <div className="scolsong flex flex-col" data-play={ptype}>
                 <div className={"font-semibold capitalize text-gray-100"+
@@ -422,7 +481,8 @@ const Playlist = ({type, tdata, action, action2, sid, paused})=>{
                 </div>
               </div>
             </div>
-            <div className="scol2 font-semibold">{ptype?song.album_name:null}</div>
+            <div className="scol2 font-semibold"
+              dangerouslySetInnerHTML={{__html: ptype?song.album_name:null}}></div>
             <div className="scol3 font-semibold">{ptype?song.year:null}</div>
             <div className="font-semibold flex justify-end">
               {jiosaavn.formatTime(song.song_duration)}
@@ -510,7 +570,9 @@ const Home = ({tab, action, sid, paused})=>{
                       <div className={paused?"tria":"fbars"}></div>
                     </div>
                   ):null}
-                  <div className="mt-4 mb-1 text-gray-100 text-sm font-semibold">{card.name}</div>
+                  <div className="mt-4 mb-1 text-gray-100 text-sm font-semibold">
+                    {card.name}
+                  </div>
                   <div className="my-1 leading-5 text-xs font-semibold tracking-wider">
                     {card.desc}
                   </div>
@@ -535,7 +597,7 @@ const Queue = ({queue, curr, action, action2, paused})=>{
         <div className="w-10 text-center gcol">
           {paused?"1":<Icon src="./img/asset/equaliser.gif" ext width={16}/>}
         </div>
-        <Image src={queue[curr].albumArt} w={40} ext/>
+        <Image src={queue[curr].albumArt.to150()} w={40} ext/>
         <div className="flex flex-col">
           <div className="capitalize dotdot font-semibold gcol"
             dangerouslySetInnerHTML={{__html: queue[curr].name}}></div>
@@ -552,7 +614,7 @@ const Queue = ({queue, curr, action, action2, paused})=>{
           <div className="songCont handcr prtclk acol pr-12 py-2"
             onClick={()=> action2("clickq",(curr+i+1)%queue.length)}>
             <div className="w-10 text-center font-semibold">{i+2}</div>
-            <Image src={qs.albumArt} w={40} ext/>
+            <Image src={qs.albumArt.to150()} w={40} ext/>
             <div className="flex flex-col">
               <div className="capitalize dotdot font-semibold text-gray-100"
                 dangerouslySetInnerHTML={{__html: qs.name}}></div>

src/containers/applications/apps/vscode.js

@@ -27,7 +27,7 @@ export const VsCode = ()=>{
         <div className="restWindow flex-grow flex flex-col">
           <div className="flex-grow overflow-hidden">
             {wnapp.hide?null:(
-              <iframe src={url} id="isite" className="w-full h-full"
+              <iframe src={url} className="w-full h-full"
                 frameborder="0"></iframe>
             )}
           </div>

src/containers/applications/index.js

@@ -16,6 +16,7 @@ export * from './apps/vscode';
 export * from './apps/explorer';
 export * from './apps/about';
 export * from './apps/spotify';
+export * from './apps/discord';
 
 export const ScreenPreview = ()=>{
   const tasks = useSelector(state=>state.taskbar);

src/containers/applications/tabs.scss

@@ -46,8 +46,8 @@
   left: 0;
   width: 100%;
   height: 100%;
-  -webkit-backdrop-filter: blur(5px);
-  backdrop-filter: blur(5px);
+  // -webkit-backdrop-filter: blur(5px);
+  // backdrop-filter: blur(5px);
   overflow: hidden;
   border-radius: 6px;
   transition: all ease-in-out 200ms;

src/containers/applications/tabs2.scss

@@ -268,3 +268,86 @@
     cursor: pointer;
   }
 }
+
+.dsbar{
+  background: #282a2f;
+  position: relative;
+}
+
+.servCont{
+  padding: 0 12px;
+  height: max-content;
+  overflow-y: scroll;
+  position: absolute;
+
+  .svIcon, .dsIcon{
+    height: 48px;
+    background: #36393f;
+    border-radius: 24px;
+    margin-bottom: 8px;
+
+    img{
+      border-radius: 24px;
+    }
+
+    transition: all 200ms ease-in-out;
+    cursor: pointer;
+
+    &::after{
+      content: "";
+      width: 4px;
+      height: 0px;
+      position: absolute;
+      left: -12px;
+      background: #fefefe;
+      z-index: 1;
+      border-radius: 0 6px 6px 0;
+      transition: all 200ms ease-in-out;
+    }
+
+    &:hover, &:nth-child(3){
+      background: none;
+      border-radius: 16px;
+      img{
+        border-radius: 16px;
+      }
+
+      &::after{
+        height: 20px;
+      }
+
+      &:nth-child(1){
+        background: #5865F2;
+      }
+    }
+
+    &:nth-child(3){
+      &::after{
+        height: 40px;
+      }
+    }
+  }
+
+  hr{
+    width: 60%;
+    border-style: solid;
+    border-color: #36393f;
+  }
+}
+
+.wnServer{
+  &::before{
+    content: "";
+    position: absolute;
+    width: 48px;
+    height: 48px;
+    background-image: url('./apps/assets/server.jpg');
+    background-size: cover;
+    border-radius: 16px;
+    z-index: 1;
+  }
+
+  &:hover::before{
+    display: none;
+  }
+}

src/containers/applications/wnapp.css

@@ -34,3 +34,7 @@
   /* background: linear-gradient(0deg, #1d1d1f 75%, #1e1e1f 100%); */
   /* background: linear-gradient(0deg, #1d1d1f 75%, #2d2d2d 100%); */
 }
+
+.discordWn{
+  background: #36393f;
+}

src/index.css

@@ -108,14 +108,26 @@ img[data-flip='true'], svg[data-flip='true']{
 }
 
 .dpShad{
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
+}
+
+.dpShad0{
   filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.25));
 }
 
 .mdShad{
+  box-shadow: 0 0 8px rgba(41, 41, 41, 0.1);
+}
+
+.mdShad0{
   filter: drop-shadow(0 0 8px rgba(41, 41, 41, 0.1));
 }
 
 .ltShad{
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+.ltShad0{
   filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
 }
 

src/short.css

@@ -17880,6 +17880,10 @@
 	width: 4rem
 }
 
+.w-18 {
+	width: 4.5rem
+}
+
 .w-20 {
 	width: 5rem
 }
@@ -17924,6 +17928,10 @@
 	width: 24.5rem
 }
 
+.w-100{
+	width: 25rem
+}
+
 .w-auto {
 	width: auto
 }
@@ -17964,6 +17972,10 @@
 	width: 40%
 }
 
+.max-w-2\/5 {
+	max-width: 40%
+}
+
 .w-3\/5 {
 	width: 60%
 }

src/utils/apps.js

@@ -361,7 +361,6 @@ export default [
   name: 'Discord',
   icon: 'discord',
   type: 'app',
-  action: 'EXTERNAL',
-  payload: 'https://discord.gg/Fz3Dkc4S'
+  action: 'DISCORD',
 }
 ];

src/utils/icons.js

@@ -7,7 +7,6 @@ export const home = (props) => {
     viewBox="0 0 512 512"
     width={24}
     height={24}
-    xmlns="http://www.w3.org/2000/svg"
     {...props}>
     <path
       d="M448 463.746H298.667V314.413h-85.334v149.333H64V148.318L256 36.572l192 110.984v316.19z"
@@ -71,7 +70,6 @@ export const play = (props) => {
       height={16}
       width={16}
       viewBox="0 0 16 16"
-      className="Svg-sc-1bi12j5-0 fIDrcz"
       {...props}
     >
       <path d="M4.018 14L14.41 8 4.018 2z" />
@@ -85,7 +83,6 @@ export const pause = (props) => {
       height={16}
       width={16}
       viewBox="0 0 16 16"
-      className="Svg-sc-1bi12j5-0 fIDrcz"
       {...props}
     >
       <path fill="none" d="M0 0h16v16H0z" />
@@ -93,3 +90,20 @@ export const pause = (props) => {
     </svg>
   )
 }
+
+export const search = (props) => {
+  return (
+    <svg
+      height={24}
+      width={24}
+      viewBox="0 0 512 512"
+      aria-hidden="true"
+      {...props}
+    >
+      <path
+        d="M349.714 347.937l93.714 109.969-16.254 13.969-93.969-109.969q-48.508 36.825-109.207 36.825-36.826 0-70.476-14.349t-57.905-38.603-38.603-57.905-14.349-70.476 14.349-70.476 38.603-57.905 57.905-38.603 70.476-14.349 70.476 14.349 57.905 38.603 38.603 57.905 14.349 70.476q0 37.841-14.73 71.619t-40.889 58.921zM224 377.397q43.428 0 80.254-21.461t58.286-58.286 21.461-80.254-21.461-80.254-58.286-58.285T224 57.397t-80.254 21.46-58.285 58.285-21.46 80.254 21.46 80.254 58.285 58.286T224 377.397z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}