diff --git a/web/custom_widgets/PlyrVideoPlayer.py b/web/custom_widgets/PlyrVideoPlayer.py index 125fbe8..c0501c9 100644 --- a/web/custom_widgets/PlyrVideoPlayer.py +++ b/web/custom_widgets/PlyrVideoPlayer.py @@ -6,7 +6,7 @@ from nicegui import ui class PlyrVideoPlayer: _plyr_installed = False - def __init__(self, src: str, poster_url: str = None): + def __init__(self, src: str, poster_url: str = None, minimal: bool = False): if not PlyrVideoPlayer._plyr_installed: install_plyr() PlyrVideoPlayer._plyr_installed = True @@ -35,10 +35,15 @@ class PlyrVideoPlayer: options = {} options.setdefault("settings", []) options.setdefault("ratio", "16:9") - options.setdefault("controls", - ["play-large", "play", "rewind", "fast-forward", "current-time", "progress", "duration", - "mute", "volume", "pip", "airplay", "download", "fullscreen"] - ) + if minimal: + options.setdefault("controls", + ["play-large", "play", "current-time", "progress", "mute", "pip", "airplay", "download", + "fullscreen"]) + else: + options.setdefault("controls", + ["play-large", "play", "rewind", "fast-forward", "current-time", "progress", "duration", + "mute", "volume", "pip", "airplay", "download", "fullscreen"] + ) js_options = str(options).replace("True", "true").replace("'", '"') js = f""" diff --git a/web/custom_widgets/content_dialog.py b/web/custom_widgets/content_dialog.py index 40e7c3c..9bcd4ab 100644 --- a/web/custom_widgets/content_dialog.py +++ b/web/custom_widgets/content_dialog.py @@ -30,7 +30,7 @@ class ContentDialog(ui.dialog): with self.card: self.additional_info_column = ui.column(wrap=False) self.additional_info_column.classes("w-full") - self.additional_info_column.style("width: 50%; gap: 0") + self.additional_info_column.style("width: 50%; gap: 0; white-space: nowrap") with self.additional_info_column: release_date = self.content.release_date.split("-")[::-1] diff --git a/web/pages/contents.py b/web/pages/contents.py index 818abd7..7226217 100644 --- a/web/pages/contents.py +++ b/web/pages/contents.py @@ -2,7 +2,7 @@ from nicegui import ui import globals from web.custom_widgets import draw_header, ContentCard -from web.misc import check_user +from web.misc import check_user, is_portrait async def page(): @@ -11,8 +11,15 @@ async def page(): if not await check_user(): ui.navigate.to("/") + portrait = await is_portrait() + await draw_header() - with ui.row(wrap=True).classes("w-full").style("margin: auto; gap: 16px"): + if portrait: + container = ui.column(wrap=False).classes("w-full items-center").style("margin: auto; gap: auto;") + else: + container = ui.row().classes("items-center").style("margin: auto; gap: auto;") + + with container: for content in globals.MOVIES_DATABASE.contents: ContentCard(content.tmdb_id) diff --git a/web/pages/room.py b/web/pages/room.py index ec84ea5..33bd3ce 100644 --- a/web/pages/room.py +++ b/web/pages/room.py @@ -9,7 +9,7 @@ import globals from rooms.state import PlayerState from web.custom_widgets import PlyrVideoPlayer from web.custom_widgets.header import draw_header -from web.misc import check_user +from web.misc import check_user, is_portrait def _check_room(room_uid: str): @@ -68,10 +68,11 @@ def _change_episode(room_uid: str, tmdb_id: int, season_number: int, episode_num def _draw_users_list(room_uid: str, users_card: ui.card): users_card.clear() room = globals.ROOMS_DATABASE.by_uid[room_uid] - for user_uid in room.connected_users: - user = globals.USERS_DATABASE.by_uid[user_uid] - with users_card, ui.card().classes("w-full"): - ui.label(user.username) + with users_card, ui.scroll_area(): + for user_uid in room.connected_users: + user = globals.USERS_DATABASE.by_uid[user_uid] + with ui.card().classes("w-full"): + ui.label(user.username) def _draw_seasons(room_uid: str, tmdb_id: int, seasons_column: ui.column, video_player: PlyrVideoPlayer, @@ -82,10 +83,8 @@ def _draw_seasons(room_uid: str, tmdb_id: int, seasons_column: ui.column, video_ for season_number in range(1, tv_show.number_of_seasons + 1): season = tv_show.seasons[season_number - 1] - with seasons_column, ui.card().classes("w-full"): - ui.html(f"{season.title}") - - with ui.row().classes("w-full"): + with seasons_column, ui.card().classes("w-full no-shadow").style("border-radius: 15px"): + with ui.expansion(text=season.title, value=True).classes("w-full"), ui.row().classes("w-full"): episodes = tv_show.seasons[season_number - 1].episodes for episode_number in range(1, len(episodes) + 1): episode_button = ui.button(str(episode_number), @@ -166,6 +165,8 @@ async def page(room_uid: str): ui.navigate.to("/") return + portrait = await is_portrait() + await draw_header() await _join_room(room_uid, user.uid) @@ -177,19 +178,26 @@ async def page(room_uid: str): "episode": None } - with ui.row(wrap=False).classes("w-full"): + with ui.column(wrap=False).classes("w-full") if portrait else ui.row(wrap=False).classes("w-full"): player_card = ui.card() player_card.classes("no-shadow") - player_card.style("width: 80%; min-height: 80vh; max-height: 80vh; border-radius: 15px") + if portrait: + player_card.style("width: 100%; border-radius: 15px") + else: + player_card.style("width: 80%; min-height: 80vh; max-height: 80vh; border-radius: 15px") player_card.style("display: flex; justify-content: center; align-items: center;") users_card = ui.card() users_card.classes("no-shadow") - users_card.style("width: 20%; min-height: 80vh; max-height: 80vh; border-radius: 15px") + if portrait: + users_card.style("width: 100%; border-radius: 15px") + else: + users_card.style("width: 20%; min-height: 40vh; max-height: 40vh; border-radius: 15px") + ui.timer(1, partial(_draw_users_list, room_uid, users_card)) with player_card: - video_player = PlyrVideoPlayer(src="") + video_player = PlyrVideoPlayer(src="", poster_url="", minimal=portrait) video_player.on("play", partial(_on_play, room_uid, player_data)) video_player.on("pause", partial(_on_pause, room_uid, player_data))