ok

2024-12-26 08:58:59 +07:00
parent c6d7ed5aae
commit cf38edac85
17 changed files with 259 additions and 167 deletions
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -190,28 +190,32 @@ const ChildWrapper = styled.div`
  flex-direction: column;
  width: 100%;
 `;
-
 const Child = styled.div`
  width: 100%;
  height: 40px;
  margin: 5px;
-  background-color: rgba(88, 55, 50, 0.2);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
-  padding-top: 10px;
  padding-left: 5px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;

  ${(props) =>
-    props.hasChildren &&
-    `
-    height: auto;
-    padding-bottom: 10px;
-  `}
+    props.hasChildren
+      ? `
+        border: 1px solid #ababab;
+        height: auto;
+        padding-bottom: 10px;
+      `
+      : `
+        display: flex;
+        align-items: center;
+        background-color: rgb(223 223 223);
+      `}
 `;

+
 const Header = ({
  HeaderText,
  HeaderSize='6vw',
@@ -343,7 +347,7 @@ const Header = ({
                      {shopName}

                      <Child>
-                        Mode edit 
+                        Mode edit &nbsp;
                        <Switch
                        borderRadius={0}
                          checked={isEditMode}
--- a/src/components/Item.module.css
+++ b/src/components/Item.module.css
@@ -144,6 +144,7 @@
  margin-left: 5px;
  color: #d9c61c;
  text-align: right;
+  margin-top: 22px;
 }

 .itemQty {
--- a/src/components/ItemLister.module.css
+++ b/src/components/ItemLister.module.css
@@ -90,7 +90,7 @@
  background-color: #0000008c;
  width: 100%;
  top: 7px;
-  bottom: -10px;
+  bottom: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
--- a/src/components/MusicPlayer.css
+++ b/src/components/MusicPlayer.css
@@ -16,19 +16,22 @@
  top: 0;
  left: 0;
  right: 0;
-  height: 142px;
+  height: 120px;
  /* Adjust height as needed */
  background-size: cover;
  /* Adjust background image size */
  background-position: center;
  /* Center the background image */
-  filter: blur(1.5px);
-  -webkit-filter: blur(1.5px);
-  border-radius: 13px 13px 0 0;
+  /* filter: blur(1.5px);
+  -webkit-filter: blur(1.5px); */
+  /* border-radius: 13px 13px 0 0; */
  background-color: rgb(95 121 89);
  /* Rounded corners at the top */
  text-align: right;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
+
+  border-radius: 0 0 15px 15px;
+  z-index: 1;
 }

 .current-name {
@@ -73,6 +76,8 @@
  font-size: 18px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  /* Text shadow for readability */
+  
+  margin-bottom: -47px;
 }

 .progress-container {
@@ -124,6 +129,17 @@
  /* Allow vertical scrolling */
 }

+.expandable-container > div:first-child {
+  padding-top: 21px;
+  
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+*/ }
+
 .expand-button {
  font-size: 20px;
  position: relative;
@@ -138,7 +154,21 @@
  text-align: center;
  line-height: 40px;
  /* Center text vertically */
-}
+
+  -webkit-tap-highlight-color: transparent;
+
+  -webkit-touch-callout: none;
+    -webkit-user-select: none;
+     -khtml-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+
+  outline: none;
+  
+  transition: padding-top 0.3s ease;
+  padding-top: 8px;
+  }

 .expand-button h5 {
  font-weight: 500;
@@ -146,8 +176,8 @@
  text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.36);
 }

-.expand-button:hover {
-  background-color: #73a585;
+.expand-button.expanded{
+  padding-top: 0px;
 }

 /* Adjust height of the music player container when expanded */
@@ -224,10 +254,6 @@
  /* Adjust fill color */
 }

-/* Add hover effect for the search icon */
-.search-box .search-icon:hover {
-  color: #555;
-}
 .rectangle {
  position: relative;
  height: 200px;
--- a/src/components/MusicPlayer.js
+++ b/src/components/MusicPlayer.js
@@ -284,16 +284,16 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
  const handleSetPlayer = () => {
    const token = localStorage.getItem("auth");

+    socket.emit("claimPlayer", {
+      token,
+      shopId,
+    });
    if (isSpotifyNeedLogin) {
-      socket.emit("claimPlayer", {
-        token,
-        shopId,
-      });
    } else {
-      socket.emit("unClaimPlayer", {
-        token,
-        shopId,
-      });
+      // socket.emit("unClaimPlayer", {
+      //   token,
+      //   shopId,
+      // });
    }
  };

@@ -333,9 +333,9 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
  }, [expanded]);


-  const [text, setText] = useState("Awaiting the next hit");
+  const [text, setText] = useState("Menunggu musik favoritmu");
  const textIndex = useRef(0);
-  const [messages, setMessages] = useState(["Awaiting the next hit", "Click to request your fav song"]);
+  const [messages, setMessages] = useState(["Menunggu musik favoritmu", "Klik untuk putar musik favoritmu"]);


  useEffect(() => {
@@ -343,8 +343,8 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
    const newMessages = [
      currentSong != null && currentSong.item != undefined
        ? `${currentSong.item.artists[0].name} - ${currentSong.item.name}`
-        : "Awaiting the next hit",
-      "Click to request your fav song"
+        : "Menunggu musik favoritmu",
+      "Klik untuk putar musik favoritmu"
    ];

    setMessages(newMessages);
@@ -374,9 +374,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
      <div
        onClick={toggleView}
        className="current-bgr"
-        style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
+        style={{ backgroundImage: `url(${backgroundImage})` }}
+      // style={{ backgroundImage: `url(${videoSrc != "" ? '' : backgroundImage})` }}
      >
-        <video
+        {/* <video
          ref={videoRef}
          autoPlay
          loop
@@ -385,7 +386,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
          style={{ height: '100%', width: '100%', objectFit: 'cover', position: 'absolute', top: 0, right: 0, zIndex: -1 }}
        >
          {videoSrc && <source src={videoSrc} type="video/mp4" />}
-        </video>
+        </video> */}
        {currentLines.present.map((line, index) => (
          <div className="present" style={{
            color: subtitleColor,
@@ -419,7 +420,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
              currentSong.item.album.images[0] &&
              currentSong.item.artists[0].name
              ? currentSong.item.artists[0].name
-              : "Drop your hits below"}
+              : "Pilih hits terbaikmu dibawah!"}
          </div>
          <div className="progress-container">
            <div
@@ -457,13 +458,13 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                <input
                  type="text"
                  placeholder={
-                    isSpotifyNeedLogin ? "Set as music player" : "Unset as music player"
+                    isSpotifyNeedLogin ? "Jadikan perangkat sebagai pemutar musik" : "Unset as music player"
                  }
                  onClick={handleSetPlayer}
                />
              </div>
            )}
-            <div className="search-box">
+            <div className="search-box" style={{}}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
@@ -473,7 +474,7 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
              </svg>
              <input
                type="text"
-                placeholder="Search..."
+                placeholder="cari..."
                value={songName}
                onChange={handleInputChange}
              />
@@ -490,24 +491,24 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
                />
              ))}
            {
-  songName === "" &&
-  queue && 
-  Array.isArray(queue) && 
-  queue.length > 0 && (
-    queue.map((song, index) => (
-      <MusicComponent
-        key={index}
-        song={song}
-        min={-100}
-        max={100}
-        onDecision={(vote) => onDecision(song.trackId, vote)}
-      />
-    ))
-  )
-}
+              songName === "" &&
+              queue &&
+              Array.isArray(queue) &&
+              queue.length > 0 && (
+                queue.map((song, index) => (
+                  <MusicComponent
+                    key={index}
+                    song={song}
+                    min={-100}
+                    max={100}
+                    onDecision={(vote) => onDecision(song.trackId, vote)}
+                  />
+                ))
+              )
+            }
            {songName == "" && queue.length < 1 && (
              <div className="rectangle">
-                <div className="diagonal-text">No Beats Ahead - Drop Your Hits</div>
+                <div className="diagonal-text">Antrian kosong - Pilih musikmu</div>
              </div>
            )}
            {songName == "" && queue.length > 0 && queue.length < 3 && (
@@ -516,11 +517,10 @@ export function MusicPlayer({ socket, shopId, user, shopOwnerId, isSpotifyNeedLo
              </div>
            )}
          </div>
-          <div className="expand-button" onClick={toggleExpand}>
+          <div className={`expand-button ${expanded ? "expanded" : ""}`} onClick={toggleExpand}>
+            
            <h5>
-              {expanded
-                ? "︿"
-                : "request your song"}
+                {expanded? '⋀' : 'Lihat antrian musik'}
            </h5>
          </div></>
      }
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -141,7 +141,7 @@ const SetPaymentQr = ({ shopId }) => {
        </button>
      </div>
      <div style={styles.switchContainer}>
-        <h1>Pengecekan ketersediaan ganda</h1>
+        <h3>Pengecekan ketersediaan ganda</h3>
        <p style={styles.description}>
        Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
        </p>