From d77696be5900ece7ffdf476972c460e559c47377 Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Sun, 5 Nov 2017 13:28:10 -0800 Subject: [PATCH] Flexbox activity card metadata --- data/interfaces/default/css/plexpy.css | 64 ++- .../default/current_activity_instance.html | 484 +++++++++--------- 2 files changed, 292 insertions(+), 256 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index c58ae816..502fccca 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -762,9 +762,17 @@ a .users-poster-face:hover { .dashboard-activity-terminate-session:hover { color: #e9a049; } +.dashboard-activity-info-container { + display: -webkit-flex; + display: flex; + flex-direction: column; + height: 225px; + width: 385px; + overflow: hidden; +} .dashboard-activity-info-scroller { height: 225px; - width: 335px; + width: 100%; -webkit-flex-grow: 1; flex-grow: 1; z-index: 1; @@ -807,7 +815,8 @@ a .users-poster-face:hover { text-align: right; text-transform: uppercase; line-height: 14px; - float: left; + -webkit-flex-shrink: 0; + flex-shrink: 0; } .dashboard-activity-info-item .sub-value { margin-left: 10px; @@ -909,38 +918,59 @@ a:hover .dashboard-activity-cover { font-size: 13px; padding: 0px 3px 0 3px; } +.dashboard-activity-metadata-title-container { + display: flex; + flex-direction: row; + font-size: 13px; + font-weight: bold; + line-height: 25px; + color: #fff; +} +.dashboard-activity-metadata-play_state-icon { + flex-basis: 25px; + -webkit-flex-shrink: 0; + flex-shrink: 0; +} .dashboard-activity-metadata-title { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 350px; + -webkit-flex-grow: 1; + flex-grow: 1; +} +.dashboard-activity-metadata-subtitle-container { + display: flex; + flex-direction: row; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: bold; line-height: 25px; - color: #fff; - max-width: 100%; + color: #999; +} +.dashboard-activity-metadata-media_type-icon { + flex-basis: 25px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } .dashboard-activity-metadata-subtitle { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - font-size: 13px; - font-weight: bold; - line-height: 25px; - color: #999; - max-width: 320px; - float: left; + -webkit-flex-grow: 1; + flex-grow: 1; } .dashboard-activity-metadata-user { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - font-size: 13px; - font-weight: bold; - line-height: 25px; - color: #999; text-align: right; - width: 124px; - float: right; + max-width: 124px; + flex-basis: 124px; + -webkit-flex-shrink: 0; + flex-shrink: 0; } .dashboard-activity-metadata-user-thumb { background-color: #282828; @@ -3062,7 +3092,7 @@ pre::-webkit-scrollbar-thumb { .home-platforms-instance { width: calc(100% - 20px); } - .dashboard-instance { + .dashboard-activity-instance { width: 100%; } } diff --git a/data/interfaces/default/current_activity_instance.html b/data/interfaces/default/current_activity_instance.html index ad61400f..21f212fc 100644 --- a/data/interfaces/default/current_activity_instance.html +++ b/data/interfaces/default/current_activity_instance.html @@ -123,207 +123,209 @@ DOCUMENTATION :: END % endif -
-
-
    -
  • -
    Platform
    -
    ${data['platform']}
    -
    • -
  • -
    Player
    -
    ${data['player']}
    -
    • -
  • -
    Quality
    -
    - % if data['media_type'] != 'photo' and data['quality_profile'] != 'Unknown': - <% - br = helpers.cast_to_int(data['stream_bitrate']) or '' - if br: - if br > 1000: - br = '(' + str(round(br / 1000.0, 1)) + ' Mbps)' - else: - br = '(' + str(br) + ' kbps)' - %> - ${data['quality_profile']} ${br} - % else: - ${data['quality_profile']} - % endif -
    -
    • - % if data['optimized_version'] == '1': -
  • -
    Optimized
    -
    - ${data['optimized_version_profile']} -
    -
    • - % endif -
-
    -
  • - % if _session['user_group'] == 'admin': -
    Stream
    \ - % else: -
    Stream
    - % endif -
    - % if data['transcode_decision'] == 'transcode': - Transcode - % if data['transcode_throttled'] == '1': - (Throttled) - % else: - (Speed: ${data['transcode_speed']}) - % endif - % elif data['transcode_decision'] == 'copy': - Direct Stream - % else: - Direct Play ${'(Synced)' if data['synced_version'] == '1' else ''} - % endif -
    -
    • -
  • -
    Container
    -
    - % if data.get('stream_container_decision') == 'transcode': - Transcode (${data['container'].upper()} → ${data['stream_container'].upper()}) - % else: - Direct Play (${data['container'].upper()}) - % endif -
    -
    • - % if data['media_type'] in ('movie', 'episode', 'clip', 'photo'): -
  • -
    Video
    -
    - % if data['media_type'] in ('movie', 'episode', 'clip'): - % if data.get('stream_video_decision') == 'transcode': +
    +
    +
    +
      +
    • +
      Platform
      +
      ${data['platform']}
      +
      • +
    • +
      Player
      +
      ${data['player']}
      +
      • +
    • +
      Quality
      +
      + % if data['media_type'] != 'photo' and data['quality_profile'] != 'Unknown': <% - hw_d = hw_e = '' - if data['transcode_hw_requested'] == '1' and data['transcode_hw_full_pipeline'] == '0': - hw_d = ' (HW)' - elif data['transcode_hw_requested'] == '1' and data['transcode_hw_full_pipeline'] == '1': - hw_d = hw_e = ' (HW)' + br = helpers.cast_to_int(data['stream_bitrate']) or '' + if br: + if br > 1000: + br = '(' + str(round(br / 1000.0, 1)) + ' Mbps)' + else: + br = '(' + str(br) + ' kbps)' %> - Transcode (${data['video_codec'].upper()}${hw_d} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])} → ${data['stream_video_codec'].upper()}${hw_e} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])}) - % elif data.get('stream_video_decision') == 'copy': - Direct Stream (${data['stream_video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])}) + ${data['quality_profile']} ${br} % else: - Direct Play (${data['video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])}) + ${data['quality_profile']} % endif - % elif data['media_type'] == 'photo': - Direct Play (${data['width']}x${data['height']}) - % endif -
      -
      • - % endif - % if data['media_type'] in ('movie', 'episode', 'clip', 'track'): -
    • -
      Audio
      -
      - % if data.get('stream_audio_decision') == 'transcode': - Transcode (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout'].split('(')[0].capitalize()} → ${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout'].split('(')[0].capitalize()}) - % elif data.get('stream_audio_decision') == 'copy': - Direct Stream (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout'].split('(')[0].capitalize()}) +
      +
      • + % if data['optimized_version'] == '1': +
    • +
      Optimized
      +
      + ${data['optimized_version_profile']} +
      +
      • + % endif +
    +
      +
    • + % if _session['user_group'] == 'admin': +
      Stream
      \ % else: - Direct Play (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout'].split('(')[0].capitalize()}) +
      Stream
      % endif -
    -
    • - % endif - % if data['media_type'] in ('movie', 'episode', 'clip'): -
  • -
    Subtitle
    -
    - % if data['subtitles'] == '1': - % if data['stream_subtitle_decision'] == 'transcode': - Transcode (${data['subtitle_codec'].upper()} → ${data['stream_subtitle_codec'].upper()}) - % elif data['stream_subtitle_decision'] == 'copy': - Direct Stream (${data['subtitle_codec'].upper()}) - % elif data['stream_subtitle_decision'] == 'burn': - Burn (${data['subtitle_codec'].upper()}) +
    + % if data['transcode_decision'] == 'transcode': + Transcode + % if data['transcode_throttled'] == '1': + (Throttled) + % else: + (Speed: ${data['transcode_speed']}) + % endif + % elif data['transcode_decision'] == 'copy': + Direct Stream % else: - Direct Play (${data['subtitle_codec'].upper()}) + Direct Play ${'(Synced)' if data['synced_version'] == '1' else ''} % endif - % else: - None - % endif -
    -
    • - % endif -
-
    -
  • -
    Location
    -
    - % if data['ip_address'] != 'N/A': - ${'LAN' if data['local'] == '1' else 'WAN'}: ${data['ip_address']} - - - - - % else: - N/A - % endif -
    -
    • -
  • -
    Bandwidth
    -
    - % if data['media_type'] != 'photo' and helpers.cast_to_int(data['bandwidth']): - <% - bw = helpers.cast_to_int(data['bandwidth']) - if bw != "Unknown": - if bw > 1000: - bw = str(round(bw / 1000.0, 1)) + ' Mbps' - else: - bw = str(bw) + ' kbps' - %> - ${bw} - - % elif data['synced_version'] == '1' or data['channel_stream'] == '1': - None - % else: - Unknown - % endif -
    -
    • -
+
+ +
  • +
    Container
    +
    + % if data.get('stream_container_decision') == 'transcode': + Transcode (${data['container'].upper()} → ${data['stream_container'].upper()}) + % else: + Direct Play (${data['container'].upper()}) + % endif +
    +
    • + % if data['media_type'] in ('movie', 'episode', 'clip', 'photo'): +
  • +
    Video
    +
    + % if data['media_type'] in ('movie', 'episode', 'clip'): + % if data.get('stream_video_decision') == 'transcode': + <% + hw_d = hw_e = '' + if data['transcode_hw_requested'] == '1' and data['transcode_hw_full_pipeline'] == '0': + hw_d = ' (HW)' + elif data['transcode_hw_requested'] == '1' and data['transcode_hw_full_pipeline'] == '1': + hw_d = hw_e = ' (HW)' + %> + Transcode (${data['video_codec'].upper()}${hw_d} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])} → ${data['stream_video_codec'].upper()}${hw_e} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])}) + % elif data.get('stream_video_decision') == 'copy': + Direct Stream (${data['stream_video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['stream_video_resolution'], data['stream_video_resolution'])}) + % else: + Direct Play (${data['video_codec'].upper()} ${plexpy.common.VIDEO_RESOLUTION_OVERRIDES.get(data['video_resolution'], data['video_resolution'])}) + % endif + % elif data['media_type'] == 'photo': + Direct Play (${data['width']}x${data['height']}) + % endif +
    +
    • + % endif + % if data['media_type'] in ('movie', 'episode', 'clip', 'track'): +
  • +
    Audio
    +
    + % if data.get('stream_audio_decision') == 'transcode': + Transcode (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout'].split('(')[0].capitalize()} → ${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout'].split('(')[0].capitalize()}) + % elif data.get('stream_audio_decision') == 'copy': + Direct Stream (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['stream_audio_codec'], data['stream_audio_codec'].upper())} ${data['stream_audio_channel_layout'].split('(')[0].capitalize()}) + % else: + Direct Play (${plexpy.common.AUDIO_CODEC_OVERRIDES.get(data['audio_codec'], data['audio_codec'].upper())} ${data['audio_channel_layout'].split('(')[0].capitalize()}) + % endif +
    +
    • + % endif + % if data['media_type'] in ('movie', 'episode', 'clip'): +
  • +
    Subtitle
    +
    + % if data['subtitles'] == '1': + % if data['stream_subtitle_decision'] == 'transcode': + Transcode (${data['subtitle_codec'].upper()} → ${data['stream_subtitle_codec'].upper()}) + % elif data['stream_subtitle_decision'] == 'copy': + Direct Stream (${data['subtitle_codec'].upper()}) + % elif data['stream_subtitle_decision'] == 'burn': + Burn (${data['subtitle_codec'].upper()}) + % else: + Direct Play (${data['subtitle_codec'].upper()}) + % endif + % else: + None + % endif +
    +
    • + % endif + + +
    + + % if data['media_type'] != 'photo': +
    + % if data['view_offset']: + ETA: + + +
    + + / + + + % else: + ETA: Unknown
    0:00 / + + + % endif
    - - % if data['media_type'] != 'photo': -
    - % if data['view_offset']: - ETA: - - -
    - - / - - - % else: - ETA: Unknown
    0:00 / - - % endif
    - % endif
    @@ -340,8 +342,8 @@ DOCUMENTATION :: END % else:
    % endif -
    - +
    +
    % if data['state'] == 'playing':   % elif data['state'] == 'paused': @@ -349,8 +351,9 @@ DOCUMENTATION :: END % elif data['state'] == 'buffering':   % endif - - % if data['channel_stream'] == '0': +
    +
    + % if data['channel_stream'] == '0': % if data['media_type'] == 'movie': ${data['title']} % elif data['media_type'] == 'episode': @@ -366,16 +369,17 @@ DOCUMENTATION :: END % else: ${data['title']} % endif - % elif data['media_type'] == 'episode' and data['grandparent_title']: - ${data['grandparent_title']} - - ${data['title']} - % else: - ${data['title']} - % endif + % elif data['media_type'] == 'episode' and data['grandparent_title']: + ${data['grandparent_title']} + - ${data['title']} + % else: + ${data['title']} + % endif +
    -
    +
    % if data['channel_stream'] == '0': - +
    % if data['media_type'] == 'movie':   % elif data['media_type'] == 'episode': @@ -387,49 +391,51 @@ DOCUMENTATION :: END % elif data['media_type'] == 'clip':   % endif - +
    % else: - +
      - +
    % endif - % if data['channel_stream'] == '0': - % if data['media_type'] == 'movie': - ${data['year']} - % elif data['media_type'] == 'episode': - S${data['parent_media_index']} - · E${data['media_index']} - % elif data['media_type'] == 'track': - ${data['parent_title']} - % elif data['media_type'] == 'photo': - ${data['title']} +
    + % if data['channel_stream'] == '0': + % if data['media_type'] == 'movie': + ${data['year']} + % elif data['media_type'] == 'episode': + S${data['parent_media_index']} + · E${data['media_index']} + % elif data['media_type'] == 'track': + ${data['parent_title']} + % elif data['media_type'] == 'photo': + ${data['title']} + % else: + ${data['year']} + % endif + % elif data['channel_title']: + ${data['channel_title']} + % if data['media_type'] == 'episode' and data['parent_media_index'] and data['media_index']: + (S${data['parent_media_index']} + · E${data['media_index']}) + % elif data['media_type'] == 'episode' and data['originally_available_at']: + (${data['originally_available_at']}) + % endif % else: - ${data['year']} + Channel + % if data['media_type'] == 'episode' and data['parent_media_index'] and data['media_index']: + (S${data['parent_media_index']} + · E${data['media_index']}) + % elif data['media_type'] == 'episode' and data['originally_available_at']: + (${data['originally_available_at']}) + % endif % endif - % elif data['channel_title']: - ${data['channel_title']} - % if data['media_type'] == 'episode' and data['parent_media_index'] and data['media_index']: - (S${data['parent_media_index']} - · E${data['media_index']}) - % elif data['media_type'] == 'episode' and data['originally_available_at']: - (${data['originally_available_at']}) +
    +
    + % if data['user_id']: + ${data['friendly_name']} + % else: + ${data['friendly_name']} % endif - % else: - Channel - % if data['media_type'] == 'episode' and data['parent_media_index'] and data['media_index']: - (S${data['parent_media_index']} - · E${data['media_index']}) - % elif data['media_type'] == 'episode' and data['originally_available_at']: - (${data['originally_available_at']}) - % endif - % endif -
    -
    - % if data['user_id']: - ${data['friendly_name']} - % else: - ${data['friendly_name']} - % endif +