| 390 | }; |
| 391 | |
| 392 | const ServiceOption = ({ item, onToggle, onSwap, isFirst = false, isLast = false, onTokenChange = null }) => { |
| 393 | const [token, setToken] = useState(item.token); |
| 394 | const [active, setActive] = useState(item.on); |
| 395 | |
| 396 | const setTokenCallback = useCallback( |
| 397 | (token) => { |
| 398 | setToken(token); |
| 399 | onTokenChange(item.name, token); |
| 400 | }, |
| 401 | [item.token] |
| 402 | ); |
| 403 | |
| 404 | const toggleActive = useCallback(() => { |
| 405 | if (item.name === "genius" && spotifyVersion >= "1.2.31") return; |
| 406 | const state = !active; |
| 407 | setActive(state); |
| 408 | onToggle(item.name, state); |
| 409 | }, [active]); |
| 410 | |
| 411 | return react.createElement( |
| 412 | "div", |
| 413 | null, |
| 414 | react.createElement( |
| 415 | "div", |
| 416 | { |
| 417 | className: "setting-row", |
| 418 | }, |
| 419 | react.createElement( |
| 420 | "h3", |
| 421 | { |
| 422 | className: "col description", |
| 423 | }, |
| 424 | item.name |
| 425 | ), |
| 426 | react.createElement( |
| 427 | "div", |
| 428 | { |
| 429 | className: "col action", |
| 430 | }, |
| 431 | react.createElement(ServiceAction, { |
| 432 | item, |
| 433 | setTokenCallback, |
| 434 | }), |
| 435 | react.createElement(SwapButton, { |
| 436 | icon: Spicetify.SVGIcons["chart-up"], |
| 437 | onClick: () => onSwap(item.name, -1), |
| 438 | disabled: isFirst, |
| 439 | }), |
| 440 | react.createElement(SwapButton, { |
| 441 | icon: Spicetify.SVGIcons["chart-down"], |
| 442 | onClick: () => onSwap(item.name, 1), |
| 443 | disabled: isLast, |
| 444 | }), |
| 445 | react.createElement(ButtonSVG, { |
| 446 | icon: Spicetify.SVGIcons.check, |
| 447 | active, |
| 448 | onClick: toggleActive, |
| 449 | }) |