Skip to content

Commit

Permalink
fix: playbar style
Browse files Browse the repository at this point in the history
  • Loading branch information
@zhanglun
zhanglun committed May 27, 2024
1 parent e943d78 commit 0daa4de
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 159 deletions.
96 changes: 0 additions & 96 deletions src-tauri/src/core/config.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,90 +206,6 @@ pub fn get_user_config() -> UserConfig {
}
}

pub fn load_or_initial() -> Option<UserConfig> {
let user_config_path = get_user_config_path();

if !user_config_path.exists() {
fs::File::create(&user_config_path).expect("create user config failed");
}

let content = match fs::read_to_string(&user_config_path) {
Ok(content) => content,
Err(_) => "".to_string(),
};

let mut data = match content.parse::<toml::Table>() {
Ok(data) => data,
Err(err) => {
println!("error ==> {:?}", err);
toml::map::Map::new()
}
};

if !data.contains_key("customize_style") {
data.insert(
String::from("customize_style"),
toml::Value::try_from::<CustomizeStyle>(CustomizeStyle::default()).unwrap(),
);
}

if !data.contains_key("threads") {
data.insert(
String::from("threads"),
toml::Value::try_from::<i32>(5).unwrap(),
);
}

if !data.contains_key("theme") {
data.insert(
String::from("theme"),
toml::Value::try_from::<String>(String::from("system")).unwrap(),
);
}

if !data.contains_key("color_scheme") {
data.insert(
String::from("color_scheme"),
toml::Value::try_from::<ColorScheme>(ColorScheme::System).unwrap(),
);
}

if !data.contains_key("update_interval") {
data.insert(
String::from("update_interval"),
toml::Value::try_from::<i32>(0).unwrap(),
);
}

if !data.contains_key("last_sync_time") {
data.insert(
String::from("last_sync_time"),
toml::Value::try_from::<String>(
Utc::now().to_rfc3339_opts(chrono::SecondsFormat::Secs, true),
)
.unwrap(),
);
}

if !data.contains_key("purge_on_days") {
data.insert(
String::from("purge_on_days"),
toml::Value::try_from::<u64>(0).unwrap(),
);
}

if !data.contains_key("purge_unread_articles") {
data.insert(
String::from("purge_unread_articles"),
toml::Value::try_from::<bool>(true).unwrap(),
);
}

log::debug!("USER CONFIG: {:?}", data);

Some(data.try_into::<UserConfig>().expect("config data error"))
}

pub fn add_proxy(proxy_cfg: Proxy) -> Result<Option<Vec<Proxy>>, String> {
let mut data = get_user_config();
let user_config_path = get_user_config_path();
Expand Down Expand Up @@ -397,15 +313,3 @@ pub fn update_user_config(cfg: UserConfig) -> String {

return content;
}

#[cfg(test)]
mod tests {
use super::*;

#[test]
fn test_load_or_initial() {
let res = load_or_initial();

println!("test_load_or_initial res {:?}", res);
}
}
4 changes: 2 additions & 2 deletions src/components/ArticleItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const ArticleItem = React.forwardRef((props: { article: ArticleResItem },
return (
<li
className={clsx(
"list-none rounded-md p-3 pl-6 grid gap-1 relative select-none",
"list-none rounded-md p-2 py-3 pl-5 grid gap-1 relative select-none",
"group hover:bg-[var(--accent-a3)] hover:cursor-pointer",
{
"text-[var(--gray-10)]": readStatus === ArticleReadStatus.READ,
Expand All @@ -69,7 +69,7 @@ export const ArticleItem = React.forwardRef((props: { article: ArticleResItem },
alt={article.feed_title}
className="rounded w-5 h-5"
/>
<span className="max-w-[146px] overflow-hidden text-ellipsis mr-1 whitespace-nowrap">
<span className="max-w-[124px] overflow-hidden text-ellipsis mr-1 whitespace-nowrap">
{article.author || article.feed_title}
</span>
</div>
Expand Down
93 changes: 33 additions & 60 deletions src/components/PodcastPlayer/Player.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import clsx from "clsx";
import { Pause, Play, SkipBack, SkipForward } from "lucide-react";
import { busChannel } from "@/helpers/busChannel";
import { useBearStore } from "@/stores";
import { IconButton } from "@radix-ui/themes";

type TimeDisplayProps = {
time: { minutes: number; seconds: number };
Expand All @@ -26,8 +27,7 @@ const formatTime = (currentTime: any) => {
const minutes = Math.floor(currentTime / 60);
let seconds = Math.floor(currentTime % 60);

const formatTime =
minutes + ":" + (seconds >= 10 ? String(seconds) : "0" + (seconds % 60));
const formatTime = minutes + ":" + (seconds >= 10 ? String(seconds) : "0" + (seconds % 60));

return formatTime;
};
Expand Down Expand Up @@ -116,16 +116,12 @@ export const Player = React.forwardRef((props: PlayerProps, ref) => {
const playHeadRect: DOMRect = timeline.getBoundingClientRect();
const left = playHeadRect.left;
const userClickWidth = e.clientX - left;
const userClickWidthInPercent =
(userClickWidth * 100) / playHeadRect.width;
const userClickWidthInPercent = (userClickWidth * 100) / playHeadRect.width;

playHead.style.width = userClickWidthInPercent + "%";
player.currentTime = (duration * userClickWidthInPercent) / 100;

console.log(
"🚀 ~ changeCurrentTime ~ player.currentTime:",
player.currentTime,
);
console.log("🚀 ~ changeCurrentTime ~ player.currentTime:", player.currentTime);
}
};

Expand All @@ -140,8 +136,7 @@ export const Player = React.forwardRef((props: PlayerProps, ref) => {
const playHeadRect: DOMRect = timeline.getBoundingClientRect();
const left = playHeadRect.left;
const userClickWidth = e.clientX - left;
const userClickWidthInPercent =
(userClickWidth * 100) / playHeadRect.width;
const userClickWidthInPercent = (userClickWidth * 100) / playHeadRect.width;

if (userClickWidthInPercent <= 100) {
hoverPlayHead.style.width = userClickWidthInPercent + "%";
Expand Down Expand Up @@ -176,14 +171,14 @@ export const Player = React.forwardRef((props: PlayerProps, ref) => {
}
}
},
[list],
[list]
);

function renderPlayButton() {
if (pause) {
return <Play size={26} strokeWidth={1} className="pl-[3px]" />;
return <Play size={26} className="pl-[3px]" />;
} else if (!pause) {
return <Pause size={26} strokeWidth={1} />;
return <Pause size={26} />;
}
}

Expand All @@ -206,21 +201,9 @@ export const Player = React.forwardRef((props: PlayerProps, ref) => {
}

if (timelineRef.current) {
timelineRef.current.removeEventListener(
"click",
changeCurrentTime,
false,
);
timelineRef.current.removeEventListener(
"mousemove",
hoverTimeLine,
false,
);
timelineRef.current.removeEventListener(
"mouseout",
resetTimeLine,
false,
);
timelineRef.current.removeEventListener("click", changeCurrentTime, false);
timelineRef.current.removeEventListener("mousemove", hoverTimeLine, false);
timelineRef.current.removeEventListener("mouseout", resetTimeLine, false);
}
};
}, []);
Expand Down Expand Up @@ -257,21 +240,15 @@ export const Player = React.forwardRef((props: PlayerProps, ref) => {
<div className="m-auto w-full">
<div className="bg-muted before:bg-muted relative m-auto w-full rounded-sm pt-[100%] shadow-md before:absolute before:left-0 before:top-0 before:h-full before:w-full before:content-['']">
{list[currentAudio]?.thumbnail && (
<img
alt="uri"
src={list[currentAudio]?.thumbnail}
className="absolute left-0 top-0 rounded-md"
/>
<img alt="uri" src={list[currentAudio]?.thumbnail} className="absolute left-0 top-0 rounded-md" />
)}
</div>
<div>
<div className="mt-4 text-center">{list[currentAudio]?.title}</div>
<div className="text-muted-foreground my-1 text-center text-sm">
{list[currentAudio]?.feed_title}
</div>
<div className="text-muted-foreground my-1 text-center text-sm">{list[currentAudio]?.feed_title}</div>
</div>
<div className="my-3 flex justify-center">
<div className="bg-accent w-full rounded-md">
<div className="bg-[var(--gray-3)] w-full rounded-md">
<audio ref={playerRef} preload="true">
<source src={list[currentAudio]?.mediaURL} />
Your browser does not support the audio element.
Expand All @@ -281,50 +258,46 @@ export const Player = React.forwardRef((props: PlayerProps, ref) => {
<div
ref={timelineRef}
id="timeline"
className="bg-muted-foreground/80 group relative m-auto h-1 w-full cursor-pointer rounded-md"
className="bg-[var(--gray-6)] group relative m-auto h-1 w-full cursor-pointer rounded-md"
>
<div
ref={playHeadRef}
id="playhead"
className="bg-primary relative z-[2] h-1 w-0 rounded-md"
className="bg-[var(--gray-12)] relative z-[2] h-1 w-0 rounded-md"
></div>
<div
ref={hoverPlayHeadRef}
className={clsx(
"absolute top-0 z-[1] h-1 w-0 rounded-md bg-slate-600 opacity-0 transition-opacity duration-300 ease-in group-hover:opacity-100 group-hover:before:opacity-100 group-hover:after:opacity-100",
"before:opacity-1 before:absolute before:-right-[23px] before:-top-[40px] before:z-10 before:block before:rounded-md before:bg-slate-800 before:p-1 before:text-center before:text-white before:content-[attr(data-content)]",
"after:absolute after:-right-[8px] after:-top-[8px] after:block after:rounded-md after:border-l-[8px_solid_transparent] after:border-r-[8px_solid_transparent] after:border-t-[8px_solid] after:border-t-slate-800 after:bg-slate-800 after:text-white after:opacity-0 after:content-['']",
"before:opacity-1 before:absolute before:-right-[23px] before:-top-[30px] before:z-10 before:block before:rounded-md before:bg-slate-800 before:p-1 before:text-center before:text-white before:content-[attr(data-content)]",
"after:absolute after:-right-[12px] after:-top-[8px] after:block after:rounded-md after:border-l-[8px_solid_transparent] after:border-r-[8px_solid_transparent] after:border-t-[8px_solid] after:border-t-slate-800 after:bg-slate-800 after:text-white after:opacity-0 after:content-[''] text-xs"
)}
data-content="0:00"
></div>
</div>
<TimeDisplay time={maxTime} />
</div>
<div className="flex items-center justify-center gap-8 py-3 pt-1">
<SkipBack
size={20}
onClick={prevSong}
className="text-accent-foreground hover:text-accent-foreground/80 cursor-pointer transition-all"
/>
<div
<div className="flex items-center justify-center gap-8 py-4 pt-1">
<IconButton radius="full" variant="ghost" color="gray">
<SkipBack size={20} onClick={prevSong} />
</IconButton>
<IconButton
className={clsx(
"h-[42px] w-[42px]",
"flex items-center justify-center",
"bg-foreground rounded-full",
"text-background",
"cursor-pointer",
"hover:scale-110",
"transition-all",
"transition-all"
)}
radius="full" variant="ghost" color="gray"
size="3"
onClick={onPlayButtonClick}
>
{renderPlayButton()}
</div>
<SkipForward
size={20}
onClick={nextSong}
className="text-accent-foreground hover:text-accent-foreground/80 cursor-pointer transition-all"
/>
</IconButton>
<IconButton radius="full" variant="ghost" color="gray">
<SkipForward
size={20}
onClick={nextSong}
/>
</IconButton>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/PodcastPlayer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const PodcastPlayer = () => {
<div
className={clsx(
"flex items-center justify-center rounded-sm pl-[3px]",
"text-primary-foreground bg-foreground/70 cursor-pointer",
"text-white bg-[var(--accent-a3)] cursor-pointer",
"absolute bottom-0 left-0 right-0 top-0",
"group-hover:visible",
{
Expand Down

0 comments on commit 0daa4de

Please sign in to comment.