Skip to content

Commit 11f508e

Browse files
obenlandobenland
authored
Embed: Add support for video, audio, galleries (#1645)
1 parent 379bf07 commit 11f508e

File tree

4 files changed

+104
-17
lines changed

4 files changed

+104
-17
lines changed

‎.github/changelog/1645-from-description‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Significance: minor
2+
Type: added
3+
4+
ActivityPub embeds now support audios, videos, and up to 4 images.

‎assets/css/activitypub-embed.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,57 @@
7676
display: block;
7777
}
7878

79+
.activitypub-embed-content .ap-preview {
80+
border-radius: 8px;
81+
box-sizing: border-box;
82+
display: grid;
83+
gap: 2px;
84+
grid-template-columns: 1fr 1fr;
85+
grid-template-rows: 1fr 1fr;
86+
margin: 1em 0 0;
87+
min-height: 64px;
88+
overflow: hidden;
89+
position: relative;
90+
width: 100%;
91+
}
92+
93+
.activitypub-embed-content .ap-preview.layout-1 {
94+
grid-template-columns: 1fr;
95+
grid-template-rows: 1fr;
96+
}
97+
98+
.activitypub-embed-content .ap-preview.layout-2 {
99+
aspect-ratio: auto;
100+
grid-template-rows: 1fr;
101+
height: auto;
102+
}
103+
104+
.activitypub-embed-content .ap-preview.layout-3 > img:first-child {
105+
grid-row: span 2;
106+
}
107+
108+
.activitypub-embed-content .ap-preview img {
109+
border: 0;
110+
box-sizing: border-box;
111+
display: inline-block;
112+
height: 100%;
113+
object-fit: cover;
114+
overflow: hidden;
115+
position: relative;
116+
width: 100%;
117+
}
118+
119+
.activitypub-embed-content .ap-preview video,
120+
.activitypub-embed-content .ap-preview audio {
121+
max-width: 100%;
122+
display: block;
123+
grid-column: 1 / span 2;
124+
}
125+
126+
.activitypub-embed-content .ap-preview audio {
127+
width: 100%;
128+
}
129+
79130
.activitypub-embed-content .ap-preview-text {
80131
padding: 15px;
81132
}

‎includes/class-embed.php‎

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -80,33 +80,53 @@ public static function get_html_for_object( $activity_object, $inline_css = true
8080
$boosts = isset( $activity_object['shares']['totalItems'] ) ? (int) $activity_object['shares']['totalItems'] : null;
8181
$favorites = isset( $activity_object['likes']['totalItems'] ) ? (int) $activity_object['likes']['totalItems'] : null;
8282

83-
$image = '';
83+
$audio = null;
84+
$images = null;
85+
$video = null;
8486
if ( isset( $activity_object['image']['url'] ) ) {
85-
$image = $activity_object['image']['url'];
87+
$images = array(
88+
array(
89+
'type' => 'Image',
90+
'url' => $activity_object['image']['url'],
91+
'name' => $activity_object['image']['name'] ?? '',
92+
),
93+
);
8694
} elseif ( isset( $activity_object['attachment'] ) ) {
8795
foreach ( $activity_object['attachment'] as $attachment ) {
88-
if ( isset( $attachment['type'] ) && in_array( $attachment['type'], array( 'Image', 'Document' ), true ) ) {
89-
$image = $attachment['url'];
90-
break;
96+
$type = isset( $attachment['mediaType'] ) ? strtok( $attachment['mediaType'], '/' ) : strtolower( $attachment['type'] );
97+
98+
switch ( $type ) {
99+
case 'image':
100+
$images = \wp_list_filter( $activity_object['attachment'], array( 'type' => 'Image' ) );
101+
$images = array_slice( $images, 0, 4 );
102+
break 2;
103+
case 'video':
104+
$video = $attachment;
105+
break 2;
106+
case 'audio':
107+
$audio = $attachment;
108+
break 2;
91109
}
92110
}
93111
}
94112

95113
ob_start();
96114
load_template(
97-
ACTIVITYPUB_PLUGIN_DIR . 'templates/reply-embed.php',
115+
ACTIVITYPUB_PLUGIN_DIR . 'templates/embed.php',
98116
false,
99117
array(
118+
'audio' => $audio,
100119
'author_name' => $author_name,
101120
'author_url' => $author_url,
102121
'avatar_url' => $avatar_url,
103-
'published' => $published,
104-
'title' => $title,
105-
'content' => $content,
106-
'image' => $image,
107122
'boosts' => $boosts,
123+
'content' => $content,
108124
'favorites' => $favorites,
125+
'images' => $images,
126+
'published' => $published,
127+
'title' => $title,
109128
'url' => $activity_object['id'],
129+
'video' => $video,
110130
'webfinger' => $author['webfinger'],
111131
)
112132
);

‎templates/reply-embed.php‎ renamed to ‎templates/embed.php‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,18 @@
99
$args = wp_parse_args(
1010
$args,
1111
array(
12-
'avatar_url' => '',
12+
'audio' => null,
1313
'author_name' => '',
1414
'author_url' => '',
15-
'title' => '',
15+
'avatar_url' => '',
16+
'boosts' => null,
1617
'content' => '',
18+
'favorites' => null,
1719
'image' => '',
1820
'published' => '',
21+
'title' => '',
1922
'url' => '',
20-
'boosts' => null,
21-
'favorites' => null,
23+
'video' => null,
2224
'webfinger' => '',
2325
)
2426
);
@@ -48,9 +50,19 @@
4850
<div class="ap-subtitle p-summary e-content"><?php echo \wp_kses_post( $args['content'] ); ?></div>
4951
<?php endif; ?>
5052

51-
<?php if ( $args['image'] ) : ?>
52-
<div class="ap-preview">
53-
<img class="u-photo u-featured" src="<?php echo \esc_url( $args['image'] ); ?>" alt="" />
53+
<?php if ( $args['images'] ) : ?>
54+
<div class="ap-preview <?php echo \esc_attr( 'layout-' . count( $args['images'] ) ); ?>">
55+
<?php foreach ( $args['images'] as $image ) : ?>
56+
<img class="u-photo u-featured" src="<?php echo \esc_url( $image['url'] ); ?>" alt="<?php echo \esc_attr( $image['name'] ?? '' ); ?>" />
57+
<?php endforeach; ?>
58+
</div>
59+
<?php elseif ( $args['video'] ) : ?>
60+
<div class="ap-preview layout-1">
61+
<video controls class="u-photo u-featured" src="<?php echo \esc_url( $args['video']['url'] ); ?>" title="<?php echo \esc_attr( $args['video']['name'] ?? '' ); ?>"></video>
62+
</div>
63+
<?php elseif ( $args['audio'] ) : ?>
64+
<div class="ap-preview layout-1">
65+
<audio controls class="u-photo u-featured" src="<?php echo \esc_url( $args['audio']['url'] ); ?>" title="<?php echo \esc_attr( $args['audio']['name'] ?? '' ); ?>"></audio>
5466
</div>
5567
<?php endif; ?>
5668
</div>

0 commit comments

Comments
 (0)