added failsafes, ui changes, readme update

Author: zigamacele

README.md

@@ -1,4 +1,4 @@
-# Liver ![version](https://img.shields.io/badge/Version-v0.0.3-pink?style=for-the-badge&logo)
+# Liver ![version](https://img.shields.io/badge/Version-v0.1-pink?style=for-the-badge&logo)
 
 <a><img align="right" src="https://i.imgur.com/F9qenDY.png"></a>
 
@@ -11,7 +11,7 @@ Get it for [Chrome](https://chrome.google.com/webstore/detail/liver/pjnhlmepkmji
 
 ## Images
 
-<img src="https://i.imgur.com/YHybind.png" width="700">
+<img src="https://i.imgur.com/YHybind.png" width="800">
 
 <br />
 

src/Components/DisplayMyLivers.tsx

@@ -39,16 +39,14 @@ export default function DisplayMyLivers() {
 
   function getMyLivers() {
     chrome.storage.local.get(['myLivers', 'customList'], function (data) {
-      setDisplayLivers({ ...data.myLivers, ...data.customList });
-
       if (Array.isArray(data.myLivers)) {
         let tempMyLivers: any = {};
         data.myLivers.forEach((channelID) => {
           tempMyLivers[channelID] = databaseSearch(channelID);
         });
         chrome.storage.local.set({ myLivers: tempMyLivers });
         window.location.reload();
-      }
+      } else setDisplayLivers({ ...data.myLivers, ...data.customList });
     });
   }
 

src/Components/DisplayedLiver.tsx

@@ -22,7 +22,11 @@ export function DisplayedLiver({
 
   function checkMyLivers() {
     chrome.storage.local.get('customList', function (data) {
-      setCustomList(data.customList);
+      if (data.customList) setCustomList(data.customList);
+      else {
+        chrome.storage.local.set({ customList: {} });
+        setCustomList({});
+      }
     });
   }
 
@@ -56,12 +60,13 @@ export function DisplayedLiver({
     try {
       const { data } = await axios.request(config);
       const twitter = data.twitter;
+      const name = data.name;
       chrome.storage.local.get('customList', function (data) {
         let tempCustomList = data.customList;
         tempCustomList = {
           ...tempCustomList,
           [channelID]: {
-            name: member.channel.english_name,
+            name: member.channel.english_name || name,
             imageURL: member.channel.photo,
             channelID: member.channel.id,
             twitter: twitter,
@@ -105,7 +110,7 @@ export function DisplayedLiver({
       >
         <img
           src={member.imageURL || member.channel.photo}
-          alt={member.name || member.channel.english_name}
+          alt={member.name}
           className={`rounded-full h-20 liver border-4 shadow-md ${
             isLive
               ? 'border-red-500'
@@ -142,7 +147,7 @@ export function DisplayedLiver({
             ) : (
               <BookmarkIcon
                 onClick={() => addToMyLivers(member.channel.id)}
-                className="h-5 w-5 p-0.5 text-black hover:text-neutral-500 bg-white border-2 border-red-500 rounded-full cursor-pointer"
+                className="h-5 w-5 p-0.5 text-slate-700 hover:text-neutral-500 bg-white border-2 border-red-500 rounded-full cursor-pointer"
               />
             )}
           </div>

src/Components/SelectLiver.tsx

@@ -30,7 +30,6 @@ export default function SelectLiver({
   function databaseSearch(memberID: string) {
     for (const member of flattenedDatabase) {
       if (member.channelID === memberID) {
-        console.log('MEMBEr', member);
         return member;
       }
     }

src/Components/Settings/Selectors.tsx

@@ -33,8 +33,8 @@ export default function Selectors({
             controlOutline: 'none',
             colorTextDisabled: '#94a3b8',
             colorTextPlaceholder: '#94a3b8',
-            colorBgContainer: darkMode ? '#334155' : 'white',
-            colorBgElevated: darkMode ? '#334155' : 'white',
+            colorBgContainer: darkMode ? '#334155' : '#f8fafc',
+            colorBgElevated: darkMode ? '#334155' : '#f8fafc',
             colorBorder: darkMode ? '#0f172a' : '#e2e8f0',
             controlItemBgActive: darkMode ? '#1e293b' : '#e2e8f0',
             controlItemBgHover: darkMode ? '#2D3A4B' : '#f1f5f9',

src/pages/Custom.tsx

@@ -53,7 +53,7 @@ export default function Custom() {
         chrome.storage.local.set({
           customList: {
             [userInput]: {
-              name: APIData.english_name,
+              name: APIData.english_name || APIData.name,
               channelID: APIData.id,
               imageURL: APIData.photo,
               twitter: APIData.twitter,
@@ -62,7 +62,7 @@ export default function Custom() {
         });
         setCustomList({
           [userInput]: {
-            name: APIData.english_name,
+            name: APIData.english_name || APIData.name,
             channelID: APIData.id,
             imageURL: APIData.photo,
             twitter: APIData.twitter,
@@ -76,7 +76,7 @@ export default function Custom() {
         liversArray = {
           ...liversArray,
           [userInput]: {
-            name: APIData.english_name,
+            name: APIData.english_name || APIData.name,
             channelID: APIData.id,
             imageURL: APIData.photo,
             twitter: APIData.twitter,
@@ -90,7 +90,7 @@ export default function Custom() {
         liversArray = {
           ...liversArray,
           [userInput]: {
-            name: APIData.english_name,
+            name: APIData.english_name || APIData.name,
             channelID: APIData.id,
             imageURL: APIData.photo,
             twitter: APIData.twitter,
@@ -107,7 +107,9 @@ export default function Custom() {
 
   useEffect(() => {
     chrome.storage.local.get('customList', function (data) {
-      setCustomList(data.customList);
+      if (data.customList) {
+        setCustomList(data.customList);
+      }
     });
     chrome.storage.onChanged.addListener(function (changes) {
       if ('customList' in changes) {
@@ -129,7 +131,7 @@ export default function Custom() {
         <input
           value={userInput}
           className="w-full outline-none rounded-lg h-10 border placeholder:text-slate-400 dark:placeholder:text-slate-400 border-slate-300 dark:border-slate-600 px-4 py-1 bg-slate-200 dark:bg-slate-700 pr-6"
-          placeholder="Enter VTuber's Youtube ID"
+          placeholder="VTuber's Channel ID"
           onChange={(e) => setUserInput(e.target.value)}
         />
         <PlusCircleIcon
@@ -148,9 +150,9 @@ export default function Custom() {
           <span>Need help?</span>
         </div>
       ) : (
-        <div className="flex gap-1 bg-slate-200 dark:bg-slate-700 px-3 py-2 rounded-lg shadow-sm">
+        <div className="flex gap-1 bg-slate-200 dark:bg-slate-700 px-3 py-2 rounded-lg shadow-sm border border-slate-300 dark:border-slate-600">
           <div>
-            <div>Youtube ID needs to be in this format:</div>
+            <div>Channel ID needs to be in this format:</div>
             <div className="flex items-center">
               <div className="text-[10px]">youtube.com/channel/ </div>
               <span className="bg-slate-300 dark:bg-slate-600 text-[14px] font-bold ">

src/pages/Settings.tsx

@@ -32,7 +32,7 @@ export default function Settings({
         <Tooltip title="Remove All">
           <div
             onClick={handleReset}
-            className="h-[30px] w-[30px] shadow-sm flex justify-center items-center cursor-pointer hover:text-rose-500 bg-white dark:bg-slate-700 rounded py-0.5 px-1"
+            className="h-[30px] w-[30px] shadow-sm flex justify-center border border-slate-200 dark:border-slate-700 items-center cursor-pointer hover:text-rose-500 bg-white dark:bg-slate-700 rounded py-0.5 px-1"
           >
             <TrashIcon className="h-5 w-5" />
           </div>

src/pages/_app.tsx

@@ -5,7 +5,6 @@ import { useState } from 'react';
 
 export default function App({ Component, pageProps }: AppProps) {
   const [showStreamTitle, setShowStreamTitle] = useState('');
-
   return (
     <div className="flex flex-col gap-2">
       <Navigation