From 2bbf987a0a352a36ef0cc7f06fe366b60593e89c Mon Sep 17 00:00:00 2001 From: Eugen Rochko Date: Thu, 14 Sep 2017 03:39:10 +0200 Subject: Redesign video player (#4911) * Redesign video player * Use new video player on static public pages too * Use media gallery component on static public pages too * Pause video when hiding it * Full-screen sizing on WebKit * Add aria labels to video player buttons * Display link card on public status page * Fix fullscreen from modal sizing issue * Remove contain: strict property to fix fullscreen from columns --- app/javascript/styles/stream_entries.scss | 150 ++---------------------------- 1 file changed, 10 insertions(+), 140 deletions(-) (limited to 'app/javascript/styles/stream_entries.scss') diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index 8ed4c0b25..ba6d89107 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -143,19 +143,6 @@ } } } - - .status__attachments { - margin-top: 8px; - overflow: hidden; - width: 100%; - box-sizing: border-box; - position: relative; - - .status__attachments__inner { - display: flex; - height: 214px; - } - } } .detailed-status.light { @@ -237,139 +224,22 @@ } } - .detailed-status__attachments { - margin-top: 8px; - overflow: hidden; - width: 100%; - box-sizing: border-box; - position: relative; + .status-card { + border-color: lighten($ui-secondary-color, 4%); + color: darken($ui-primary-color, 4%); - .status__attachments__inner { - display: flex; - height: 360px; - } - } - - .video-player { - margin-top: 8px; - height: 300px; - overflow: hidden; - position: relative; - - video { - position: relative; - z-index: 1; - width: 100%; - height: 100%; - object-fit: cover; - top: 50%; - transform: translateY(-50%); + &:hover { + background: lighten($ui-secondary-color, 4%); } } - } - .media-item, - .video-item { - box-sizing: border-box; - position: relative; - left: auto; - top: auto; - right: auto; - bottom: auto; - float: left; - border: medium none; - display: block; - flex: 1 1 auto; - width: 100%; - height: 100%; - overflow: hidden; - margin-right: 2px; - - &:last-child { - margin-right: 0; - } - - a { - display: block; - width: 100%; - height: 100%; - background: no-repeat scroll center center / cover; - text-decoration: none; - cursor: zoom-in; - } - - video { - position: relative; - z-index: 1; - width: 100%; - height: 100%; - object-fit: cover; - top: 50%; - transform: translateY(-50%); - } - } - - .video-item { - a { - cursor: pointer; - } - - .video-item__play { - position: absolute; - top: 50%; - left: 50%; - font-size: 36px; - transform: translate(-50%, -50%); - padding: 5px; - border-radius: 100px; - color: rgba($primary-text-color, 0.8); - z-index: 1; - } - } - - .media-spoiler { - background: $ui-primary-color; - width: 100%; - height: 100%; - cursor: pointer; - position: absolute; - top: 0; - left: 0; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - text-align: center; - transition: all 100ms linear; - z-index: 2; - - &:hover { - background: darken($ui-primary-color, 5%); - } - - span { - display: block; - - &:first-child { - font-size: 14px; - } - - &:last-child { - font-size: 11px; - font-weight: 500; - } + .status-card__title, + .status-card__description { + color: $ui-base-color; } - } - - .media-spoiler-wrapper { - &.media-spoiler-wrapper__visible { - .media-spoiler { - display: none; - } - .spoiler-button { - display: block; - } + .status-card__image { + background: $ui-secondary-color; } } -- cgit From 4aea3f88a6d30f102a79c2da7fcfac96465ba1a8 Mon Sep 17 00:00:00 2001 From: unarist Date: Tue, 19 Sep 2017 23:03:45 +0900 Subject: Hide sensitive image in default on the public pages (#5009) Additionally, this restores previous background / text color for media spoiler. --- app/javascript/styles/stream_entries.scss | 13 +++++++++++++ app/views/stream_entries/_detailed_status.html.haml | 2 +- app/views/stream_entries/_simple_status.html.haml | 2 +- 3 files changed, 15 insertions(+), 2 deletions(-) (limited to 'app/javascript/styles/stream_entries.scss') diff --git a/app/javascript/styles/stream_entries.scss b/app/javascript/styles/stream_entries.scss index ba6d89107..4f323a378 100644 --- a/app/javascript/styles/stream_entries.scss +++ b/app/javascript/styles/stream_entries.scss @@ -243,6 +243,19 @@ } } + .media-spoiler { + background: $ui-primary-color; + color: $white; + transition: all 100ms linear; + + &:hover, + &:active, + &:focus { + background: darken($ui-primary-color, 5%); + color: unset; + } + } + .pre-header { padding: 14px 0; padding-left: (48px + 14px * 2); diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml index 692d5a6d5..6860c6bf3 100644 --- a/app/views/stream_entries/_detailed_status.html.haml +++ b/app/views/stream_entries/_detailed_status.html.haml @@ -24,7 +24,7 @@ - video = status.media_attachments.first %div{ data: { component: 'Video', props: Oj.dump(src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive?, width: 670, height: 380) }} - else - %div{ data: { component: 'MediaGallery', props: Oj.dump(height: 380, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }} + %div{ data: { component: 'MediaGallery', props: Oj.dump(height: 380, sensitive: status.sensitive?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }} - elsif status.preview_cards.first %div{ data: { component: 'Card', props: Oj.dump('maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_cards.first, serializer: REST::PreviewCardSerializer).as_json) }} diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml index f9a530d38..c0ea11633 100644 --- a/app/views/stream_entries/_simple_status.html.haml +++ b/app/views/stream_entries/_simple_status.html.haml @@ -25,4 +25,4 @@ - video = status.media_attachments.first %div{ data: { component: 'Video', props: Oj.dump(src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive?, width: 610, height: 343) }} - else - %div{ data: { component: 'MediaGallery', props: Oj.dump(height: 343, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }} + %div{ data: { component: 'MediaGallery', props: Oj.dump(height: 343, sensitive: status.sensitive?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }} -- cgit