Changeset 10839 for trunk/src/bp-templates/bp-legacy/buddypress/assets/embeds/css-activity.php

Timestamp:

05/31/2016 07:40:36 AM (9 years ago)

Author:

r-a-y

Message:

Activity: Introduce media into embed template.

This commit displays media from an activity item into the embed template.

Specifically, if an activity item contains an oEmbed item from a
WordPress whitelisted oEmbed provider and that oEmbed item contains a
thumbnail, we will display that thumbnail along with a caption. One thing
to note is we only display the first oEmbed item to prevent cluttering up
the embed template.

If an oEmbed item isn't found, we will attempt to find the first inline
video or audio item. If such an item is found, we will embed that item
using the browser's native HTML5 player.

Props r-a-y, imath.

See #6772.

File:

• trunk/src/bp-templates/bp-legacy/buddypress/assets/embeds/css-activity.php (modified) (1 diff)

trunk/src/bp-templates/bp-legacy/buddypress/assets/embeds/css-activity.php

@@ -55 +55 @@
     font-size: .9em;
 }
+
+video {
+    width: 100%;
+    height: auto;
+}
+
+.bp-activity-embed-display-media {
+    border: 1px solid #ccc;
+    border-radius: 6px;
+}
+
+.bp-activity-embed-display-media.one-col,
+.bp-activity-embed-display-media.one-col .thumb,
+.bp-activity-embed-display-media.one-col .thumb img {
+    width: 100%;
+}
+
+.bp-activity-embed-display-media.two-col .thumb,
+.bp-activity-embed-display-media.two-col .caption {
+    display: table-cell;
+}
+
+.bp-activity-embed-display-media.two-col .thumb {
+    background: #000;
+    vertical-align: middle;
+}
+
+.bp-activity-embed-display-media.two-col .caption {
+    vertical-align: top;
+}
+
+.bp-activity-embed-display-media.two-col .thumb img {
+    border-right: 1px solid #ccc;
+    display: block;
+    width: 100%;
+}
+
+.bp-activity-embed-display-media .thumb {
+    position: relative;
+}
+
+.bp-activity-embed-display-media .caption {
+    padding: .2em .5em .5em .5em;
+}
+
+a.play-btn {
+    background: rgba(0, 0, 0, 0.75);
+    border-radius: 50%;
+    height: 50px;
+    left: 50%;
+    margin: 0;
+    padding: 1em;
+    position: absolute;
+    text-indent: 0.25em;
+    top: 50%;
+    transform: translateY(-50%) translateX(-50%);
+    -webkit-transform: translateY(-50%) translateX(-50%);
+    transition: all 0.2s ease-out;
+    width: 50px;
+}
+
+.bp-activity-embed-display-media.two-col a.play-btn {
+    height: 35px;
+    width: 35px;
+}
+
+a.play-btn:hover {
+    background: rgba(0, 0, 0, 0.95);
+    transform: translateY(-50%) translateX(-50%) scale(1.05);
+    -webkit-transform: translateY(-50%) translateX(-50%) scale(1.05);
+    transition: all 0.2s ease-out;
+}
+
+.bp-activity-embed-display-media .thumb svg {
+    fill: #fff;
+    overflow: hidden;
+}
+
+.bp-activity-embed-display-media .caption-description {
+    font-size: 90%;
+    margin: .4em 0;
+}
+
+@media only screen and (max-width: 480px) {
+    .bp-activity-embed-display-media.two-col .thumb {
+        border-bottom: 1px solid #ccc;
+        border-right: 0;
+        display: block;
+        max-width: none !important;
+    }
+
+    a.play-btn {
+        height: 35px;
+        width: 35px;
+    }
+}