Skip to content

Commit 08e27f7

Browse files
baba-devbaba-dev
authored
Merge pull request #75 from baba-dev/codex/refactor-media-page-layout-with-new-ui-elements
Add media playback layout to media page
2 parents afd3c1e + a6adfc6 commit 08e27f7

1 file changed

Lines changed: 201 additions & 34 deletions

File tree

‎custom/ui/pages/ui_page_media.c‎

Lines changed: 201 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,70 +5,237 @@
55
*/
66
#include "ui_page_media.h"
77

8+
#include "../ui_theme.h"
89
#include "../ui_wallpaper.h"
10+
#include "../widgets/ui_room_card.h"
911

10-
static void ui_page_media_delete_cb(lv_event_t *event)
12+
static void ui_page_media_delete_cb(lv_event_t* event)
1113
{
12-
ui_wallpaper_t *wallpaper = (ui_wallpaper_t *)lv_event_get_user_data(event);
14+
ui_wallpaper_t* wallpaper = (ui_wallpaper_t*)lv_event_get_user_data(event);
1315
ui_wallpaper_detach(wallpaper);
1416
}
1517

16-
static lv_obj_t *ui_page_create_content(lv_obj_t *page, const char *title_text)
18+
static lv_obj_t* ui_page_create_content(lv_obj_t* page, const char* title_text)
1719
{
18-
lv_obj_t *content = lv_obj_create(page);
20+
LV_UNUSED(title_text);
21+
22+
lv_obj_t* content = lv_obj_create(page);
1923
lv_obj_remove_style_all(content);
2024
lv_obj_set_size(content, LV_PCT(100), LV_PCT(100));
2125
lv_obj_set_style_bg_opa(content, LV_OPA_TRANSP, LV_PART_MAIN);
22-
lv_obj_set_style_pad_left(content, 192, LV_PART_MAIN);
23-
lv_obj_set_style_pad_right(content, 48, LV_PART_MAIN);
24-
lv_obj_set_style_pad_top(content, 40, LV_PART_MAIN);
25-
lv_obj_set_style_pad_bottom(content, 40, LV_PART_MAIN);
26-
lv_obj_set_style_pad_row(content, 32, LV_PART_MAIN);
26+
lv_obj_set_style_pad_all(content, 48, LV_PART_MAIN);
27+
lv_obj_set_style_pad_gap(content, 32, LV_PART_MAIN);
2728
lv_obj_set_flex_flow(content, LV_FLEX_FLOW_COLUMN);
2829
lv_obj_set_flex_align(content, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
29-
30-
lv_obj_t *title = lv_obj_create(content);
31-
lv_obj_remove_style_all(title);
32-
lv_obj_set_width(title, LV_PCT(100));
33-
lv_obj_set_style_bg_color(title, lv_color_hex(0x171f2b), LV_PART_MAIN);
34-
lv_obj_set_style_bg_opa(title, LV_OPA_80, LV_PART_MAIN);
35-
lv_obj_set_style_radius(title, 16, LV_PART_MAIN);
36-
lv_obj_set_style_shadow_width(title, 24, LV_PART_MAIN);
37-
lv_obj_set_style_shadow_opa(title, LV_OPA_50, LV_PART_MAIN);
38-
lv_obj_set_style_shadow_ofs_y(title, 10, LV_PART_MAIN);
39-
lv_obj_set_style_border_width(title, 0, LV_PART_MAIN);
40-
lv_obj_set_style_pad_all(title, 28, LV_PART_MAIN);
41-
42-
lv_obj_t *label = lv_label_create(title);
43-
lv_label_set_text(label, title_text);
44-
lv_obj_set_width(label, LV_PCT(100));
45-
lv_obj_set_style_text_align(label, LV_TEXT_ALIGN_LEFT, LV_PART_MAIN);
46-
lv_obj_set_style_text_font(label, &lv_font_montserrat_32, LV_PART_MAIN);
47-
lv_obj_set_style_text_color(label, lv_color_hex(0xf8fafc), LV_PART_MAIN);
30+
lv_obj_clear_flag(content, LV_OBJ_FLAG_SCROLLABLE);
4831

4932
return content;
5033
}
5134

52-
lv_obj_t *ui_page_media_create(lv_obj_t *parent)
35+
lv_obj_t* ui_page_media_create(lv_obj_t* parent)
5336
{
54-
if (parent == NULL) {
37+
if (parent == NULL)
38+
{
5539
return NULL;
5640
}
5741

58-
lv_obj_t *page = lv_obj_create(parent);
42+
lv_obj_t* page = lv_obj_create(parent);
5943
lv_obj_remove_style_all(page);
6044
lv_obj_set_size(page, LV_PCT(100), LV_PCT(100));
6145
lv_obj_set_style_bg_opa(page, LV_OPA_TRANSP, LV_PART_MAIN);
6246
lv_obj_set_scroll_dir(page, LV_DIR_VER);
6347
lv_obj_set_scrollbar_mode(page, LV_SCROLLBAR_MODE_OFF);
6448
lv_obj_add_flag(page, LV_OBJ_FLAG_CLICKABLE);
6549

66-
ui_wallpaper_t *wallpaper = ui_wallpaper_attach(page);
67-
if (wallpaper != NULL) {
50+
ui_wallpaper_t* wallpaper = ui_wallpaper_attach(page);
51+
if (wallpaper != NULL)
52+
{
6853
lv_obj_add_event_cb(page, ui_page_media_delete_cb, LV_EVENT_DELETE, wallpaper);
6954
}
7055

71-
ui_page_create_content(page, "TV Controls");
56+
lv_obj_t* content = ui_page_create_content(page, "Media");
57+
58+
ui_room_card_config_t now_playing_config = {
59+
.room_id = "media.now_playing",
60+
.title = "Now Playing",
61+
.icon_text = LV_SYMBOL_AUDIO,
62+
};
63+
64+
ui_room_card_t* now_playing_card = ui_room_card_create(content, &now_playing_config);
65+
if (now_playing_card != NULL)
66+
{
67+
lv_obj_t* card_obj = ui_room_card_get_obj(now_playing_card);
68+
if (card_obj != NULL)
69+
{
70+
lv_obj_t* toggle = ui_room_card_get_toggle(now_playing_card);
71+
if (toggle != NULL)
72+
{
73+
lv_obj_add_flag(toggle, LV_OBJ_FLAG_HIDDEN);
74+
}
75+
76+
lv_obj_t* specs = lv_obj_get_child(card_obj, 2);
77+
if (specs != NULL)
78+
{
79+
lv_obj_add_flag(specs, LV_OBJ_FLAG_HIDDEN);
80+
}
81+
82+
lv_obj_t* info_row = lv_obj_create(card_obj);
83+
lv_obj_remove_style_all(info_row);
84+
lv_obj_set_width(info_row, LV_PCT(100));
85+
lv_obj_set_style_bg_opa(info_row, LV_OPA_TRANSP, LV_PART_MAIN);
86+
lv_obj_set_style_pad_gap(info_row, 24, LV_PART_MAIN);
87+
lv_obj_set_flex_flow(info_row, LV_FLEX_FLOW_ROW);
88+
lv_obj_set_flex_align(
89+
info_row, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
90+
lv_obj_clear_flag(info_row, LV_OBJ_FLAG_SCROLLABLE);
91+
92+
lv_obj_t* album_art = lv_obj_create(info_row);
93+
lv_obj_remove_style_all(album_art);
94+
lv_obj_set_size(album_art, 240, 240);
95+
lv_obj_set_style_bg_color(album_art, ui_theme_color_surface(), LV_PART_MAIN);
96+
lv_obj_set_style_bg_opa(album_art, LV_OPA_70, LV_PART_MAIN);
97+
lv_obj_set_style_radius(album_art, 16, LV_PART_MAIN);
98+
lv_obj_set_style_border_width(album_art, 0, LV_PART_MAIN);
99+
lv_obj_clear_flag(album_art, LV_OBJ_FLAG_SCROLLABLE);
100+
101+
lv_obj_t* track_info = lv_obj_create(info_row);
102+
lv_obj_remove_style_all(track_info);
103+
lv_obj_set_width(track_info, LV_PCT(100));
104+
lv_obj_set_style_bg_opa(track_info, LV_OPA_TRANSP, LV_PART_MAIN);
105+
lv_obj_set_style_pad_gap(track_info, 12, LV_PART_MAIN);
106+
lv_obj_set_flex_flow(track_info, LV_FLEX_FLOW_COLUMN);
107+
lv_obj_set_flex_align(
108+
track_info, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START);
109+
lv_obj_clear_flag(track_info, LV_OBJ_FLAG_SCROLLABLE);
110+
lv_obj_set_flex_grow(track_info, 1);
111+
112+
lv_obj_t* track_title = lv_label_create(track_info);
113+
lv_label_set_text(track_title, "Placeholder Track");
114+
lv_obj_set_style_text_font(track_title, &lv_font_montserrat_26, LV_PART_MAIN);
115+
lv_obj_set_style_text_color(track_title, ui_theme_color_on_surface(), LV_PART_MAIN);
116+
lv_label_set_long_mode(track_title, LV_LABEL_LONG_WRAP);
117+
lv_obj_set_width(track_title, LV_PCT(100));
118+
119+
lv_obj_t* track_artist = lv_label_create(track_info);
120+
lv_label_set_text(track_artist, "Artist Name");
121+
lv_obj_set_style_text_font(track_artist, &lv_font_montserrat_20, LV_PART_MAIN);
122+
lv_obj_set_style_text_color(track_artist, ui_theme_color_muted(), LV_PART_MAIN);
123+
lv_label_set_long_mode(track_artist, LV_LABEL_LONG_WRAP);
124+
lv_obj_set_width(track_artist, LV_PCT(100));
125+
126+
lv_obj_t* track_source = lv_label_create(track_info);
127+
lv_label_set_text(track_source, "Source · Placeholder");
128+
lv_obj_set_style_text_font(track_source, &lv_font_montserrat_18, LV_PART_MAIN);
129+
lv_obj_set_style_text_color(track_source, ui_theme_color_muted(), LV_PART_MAIN);
130+
lv_label_set_long_mode(track_source, LV_LABEL_LONG_WRAP);
131+
lv_obj_set_width(track_source, LV_PCT(100));
132+
133+
lv_obj_t* transport_row = lv_obj_create(card_obj);
134+
lv_obj_remove_style_all(transport_row);
135+
lv_obj_set_width(transport_row, LV_PCT(100));
136+
lv_obj_set_style_bg_opa(transport_row, LV_OPA_TRANSP, LV_PART_MAIN);
137+
lv_obj_set_style_pad_gap(transport_row, 16, LV_PART_MAIN);
138+
lv_obj_set_flex_flow(transport_row, LV_FLEX_FLOW_ROW);
139+
lv_obj_set_flex_align(
140+
transport_row, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);
141+
lv_obj_clear_flag(transport_row, LV_OBJ_FLAG_SCROLLABLE);
142+
143+
const char* button_labels[] = {"Prev", "Play/Pause", "Next"};
144+
for (size_t i = 0; i < LV_ARRAY_SIZE(button_labels); i++)
145+
{
146+
lv_obj_t* control_btn = lv_btn_create(transport_row);
147+
lv_obj_remove_style_all(control_btn);
148+
lv_obj_set_flex_grow(control_btn, 1);
149+
lv_obj_set_height(control_btn, 56);
150+
lv_obj_set_style_radius(control_btn, 18, LV_PART_MAIN);
151+
lv_obj_set_style_bg_color(control_btn, ui_theme_color_accent(), LV_PART_MAIN);
152+
lv_obj_set_style_bg_opa(control_btn, LV_OPA_80, LV_PART_MAIN);
153+
lv_obj_set_style_border_width(control_btn, 0, LV_PART_MAIN);
154+
lv_obj_set_style_shadow_width(control_btn, 0, LV_PART_MAIN);
155+
lv_obj_set_style_pad_hor(control_btn, 24, LV_PART_MAIN);
156+
lv_obj_set_style_pad_ver(control_btn, 8, LV_PART_MAIN);
157+
lv_obj_clear_flag(control_btn, LV_OBJ_FLAG_SCROLLABLE);
158+
159+
lv_obj_t* btn_label = lv_label_create(control_btn);
160+
lv_label_set_text(btn_label, button_labels[i]);
161+
lv_obj_center(btn_label);
162+
lv_obj_set_style_text_font(btn_label, &lv_font_montserrat_18, LV_PART_MAIN);
163+
lv_obj_set_style_text_color(btn_label, lv_color_white(), LV_PART_MAIN);
164+
}
165+
166+
lv_obj_t* volume_slider = lv_slider_create(transport_row);
167+
lv_obj_set_flex_grow(volume_slider, 2);
168+
lv_obj_set_height(volume_slider, 36);
169+
lv_slider_set_range(volume_slider, 0, 100);
170+
lv_slider_set_value(volume_slider, 40, LV_ANIM_OFF);
171+
lv_obj_clear_flag(volume_slider, LV_OBJ_FLAG_SCROLLABLE);
172+
lv_obj_set_style_bg_color(volume_slider, ui_theme_color_muted(), LV_PART_MAIN);
173+
lv_obj_set_style_bg_opa(volume_slider, LV_OPA_30, LV_PART_MAIN);
174+
lv_obj_set_style_radius(volume_slider, 18, LV_PART_MAIN);
175+
lv_obj_set_style_border_width(volume_slider, 0, LV_PART_MAIN);
176+
lv_obj_set_style_bg_color(volume_slider, ui_theme_color_accent(), LV_PART_INDICATOR);
177+
lv_obj_set_style_bg_opa(volume_slider, LV_OPA_COVER, LV_PART_INDICATOR);
178+
lv_obj_set_style_radius(volume_slider, 18, LV_PART_INDICATOR);
179+
}
180+
}
181+
182+
ui_room_card_config_t scenes_config = {
183+
.room_id = "media.quick_scenes",
184+
.title = "Quick Scenes",
185+
.icon_text = LV_SYMBOL_LIST,
186+
};
187+
188+
ui_room_card_t* scenes_card = ui_room_card_create(content, &scenes_config);
189+
if (scenes_card != NULL)
190+
{
191+
lv_obj_t* card_obj = ui_room_card_get_obj(scenes_card);
192+
if (card_obj != NULL)
193+
{
194+
lv_obj_t* toggle = ui_room_card_get_toggle(scenes_card);
195+
if (toggle != NULL)
196+
{
197+
lv_obj_add_flag(toggle, LV_OBJ_FLAG_HIDDEN);
198+
}
199+
200+
lv_obj_t* specs = lv_obj_get_child(card_obj, 2);
201+
if (specs != NULL)
202+
{
203+
lv_obj_add_flag(specs, LV_OBJ_FLAG_HIDDEN);
204+
}
205+
206+
lv_obj_t* scene_grid = lv_obj_create(card_obj);
207+
lv_obj_remove_style_all(scene_grid);
208+
lv_obj_set_width(scene_grid, LV_PCT(100));
209+
lv_obj_set_style_bg_opa(scene_grid, LV_OPA_TRANSP, LV_PART_MAIN);
210+
lv_obj_set_style_pad_gap(scene_grid, 16, LV_PART_MAIN);
211+
lv_obj_set_flex_flow(scene_grid, LV_FLEX_FLOW_ROW_WRAP);
212+
lv_obj_set_flex_align(
213+
scene_grid, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_START, LV_FLEX_ALIGN_CENTER);
214+
lv_obj_clear_flag(scene_grid, LV_OBJ_FLAG_SCROLLABLE);
215+
216+
const char* scene_labels[] = {"Morning", "Movie", "Night", "Party"};
217+
for (size_t i = 0; i < LV_ARRAY_SIZE(scene_labels); i++)
218+
{
219+
lv_obj_t* scene_btn = lv_btn_create(scene_grid);
220+
lv_obj_remove_style_all(scene_btn);
221+
lv_obj_set_style_radius(scene_btn, 14, LV_PART_MAIN);
222+
lv_obj_set_style_bg_color(scene_btn, ui_theme_color_surface(), LV_PART_MAIN);
223+
lv_obj_set_style_bg_opa(scene_btn, LV_OPA_60, LV_PART_MAIN);
224+
lv_obj_set_style_border_width(scene_btn, 0, LV_PART_MAIN);
225+
lv_obj_set_style_shadow_width(scene_btn, 0, LV_PART_MAIN);
226+
lv_obj_set_style_pad_hor(scene_btn, 24, LV_PART_MAIN);
227+
lv_obj_set_style_pad_ver(scene_btn, 16, LV_PART_MAIN);
228+
lv_obj_set_flex_grow(scene_btn, 1);
229+
lv_obj_clear_flag(scene_btn, LV_OBJ_FLAG_SCROLLABLE);
230+
231+
lv_obj_t* label = lv_label_create(scene_btn);
232+
lv_label_set_text(label, scene_labels[i]);
233+
lv_obj_center(label);
234+
lv_obj_set_style_text_font(label, &lv_font_montserrat_18, LV_PART_MAIN);
235+
lv_obj_set_style_text_color(label, ui_theme_color_on_surface(), LV_PART_MAIN);
236+
}
237+
}
238+
}
72239

73240
return page;
74241
}

0 commit comments

Comments
 (0)