[SpotifyControls] Add option to show Controls on hover (#352)

Co-authored-by: Dominik <domi@bambus.me>
Co-authored-by: Ven <vendicated@riseup.net>
This commit is contained in:
Dominik 2023-01-23 22:25:00 +01:00 committed by GitHub
parent 83757b19be
commit cb4c50842f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -16,16 +16,38 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { Settings } from "@api/settings";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import definePlugin from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import { Player } from "./PlayerComponent"; import { Player } from "./PlayerComponent";
function toggleHoverControls(value: boolean) {
document.getElementById("vc-spotify-hover-controls")?.remove();
if (value) {
const style = document.createElement("style");
style.id = "vc-spotify-hover-controls";
style.textContent = `
.vc-spotify-button-row { height: 0; opacity: 0; will-change: height, opacity; transition: height .2s, opacity .05s; }
#vc-spotify-player:hover .vc-spotify-button-row { opacity: 1; height: 32px; }
`;
document.head.appendChild(style);
}
}
export default definePlugin({ export default definePlugin({
name: "SpotifyControls", name: "SpotifyControls",
description: "Spotify Controls", description: "Spotify Controls",
authors: [Devs.Ven, Devs.afn, Devs.KraXen72], authors: [Devs.Ven, Devs.afn, Devs.KraXen72],
dependencies: ["MenuItemDeobfuscatorAPI"], dependencies: ["MenuItemDeobfuscatorAPI"],
options: {
hoverControls: {
description: "Show controls on hover",
type: OptionType.BOOLEAN,
default: false,
onChange: v => toggleHoverControls(v)
},
},
patches: [ patches: [
{ {
find: "showTaglessAccountPanel:", find: "showTaglessAccountPanel:",
@ -53,6 +75,6 @@ export default definePlugin({
} }
} }
], ],
start: () => toggleHoverControls(Settings.plugins.SpotifyControls.hoverControls),
renderPlayer: () => <Player /> renderPlayer: () => <Player />
}); });