search

AzetJP / mastodon-timeline-widget

Here is a "widget" in Javascript for you to display your Mastodon timeline on your blog/website.
MIT License
15 stars 5 forks source link

Support embedded videos #5

Open nicobo opened 5 years ago

nicobo commented 5 years ago

E.g. the following toot : https://mastodon.bida.im/@autoscatto/100944190417614914

generates an empty div :

<div class="toot-medias"></div>

Payload :

{
  "id": "100958944087279885",
  "created_at": "2018-10-25T23:47:11.806Z",
  "in_reply_to_id": null,
  "in_reply_to_account_id": null,
  "sensitive": false,
  "spoiler_text": "",
  "visibility": "public",
  "language": null,
  "uri": "https://mastodon.social/users/nicobo/statuses/100958944087279885/activity",
  "content": "\u003cp\u003eI dream of rave on the moon.\u003c/p\u003e\u003cp\u003e\u003ca href=\"https://mastodon.bida.im/tags/rave\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003erave\u003c/span\u003e\u003c/a\u003e \u003ca href=\"https://mastodon.bida.im/tags/trip\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003etrip\u003c/span\u003e\u003c/a\u003e \u003ca href=\"https://mastodon.bida.im/tags/moon\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003emoon\u003c/span\u003e\u003c/a\u003e \u003ca href=\"https://mastodon.bida.im/tags/space\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003espace\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e",
  "url": "https://mastodon.social/@nicobo/100958944087279885",
  "replies_count": 0,
  "reblogs_count": 0,
  "favourites_count": 0,
  "favourited": false,
  "reblogged": false,
  "muted": false,
  "reblog": {
    "id": "100944191099934223",
    "created_at": "2018-10-23T09:15:08.000Z",
    "in_reply_to_id": null,
    "in_reply_to_account_id": null,
    "sensitive": false,
    "spoiler_text": "",
    "visibility": "public",
    "language": "en",
    "uri": "https://mastodon.bida.im/users/autoscatto/statuses/100944190417614914",
    "content": "\u003cp\u003eI dream of rave on the moon.\u003c/p\u003e\u003cp\u003e\u003ca href=\"https://mastodon.bida.im/tags/rave\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003erave\u003c/span\u003e\u003c/a\u003e \u003ca href=\"https://mastodon.bida.im/tags/trip\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003etrip\u003c/span\u003e\u003c/a\u003e \u003ca href=\"https://mastodon.bida.im/tags/moon\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003emoon\u003c/span\u003e\u003c/a\u003e \u003ca href=\"https://mastodon.bida.im/tags/space\" class=\"mention hashtag\" rel=\"nofollow noopener\" target=\"_blank\"\u003e#\u003cspan\u003espace\u003c/span\u003e\u003c/a\u003e\u003c/p\u003e",
    "url": "https://mastodon.bida.im/@autoscatto/100944190417614914",
    "replies_count": 2,
    "reblogs_count": 5,
    "favourites_count": 0,
    "favourited": false,
    "reblogged": true,
    "muted": false,
    "reblog": null,
    "application": null,
    "account": {
      "id": "376072",
      "username": "autoscatto",
      "acct": "autoscatto@mastodon.bida.im",
      "display_name": "a̷͈͛̌u̴̦͌t̷o̸s̶c̸a̵t̵t̴o̷",
      "locked": false,
      "bot": false,
      "created_at": "2018-06-18T22:00:08.840Z",
      "note": "\u003cp\u003eL'uomo è un essere che fa rumore, cattiva musica e lascia abbaiare il cane. Solo qualche rara volta sta zitto, ma allora è morto.\u003c/p\u003e",
      "url": "https://mastodon.bida.im/@autoscatto",
      "avatar": "https://files.mastodon.social/accounts/avatars/000/376/072/original/e7185ca5fd8ca5a6.png",
      "avatar_static": "https://files.mastodon.social/accounts/avatars/000/376/072/original/e7185ca5fd8ca5a6.png",
      "header": "https://files.mastodon.social/accounts/headers/000/376/072/original/2f69d8deb0f29e42.png",
      "header_static": "https://files.mastodon.social/accounts/headers/000/376/072/original/2f69d8deb0f29e42.png",
      "followers_count": 206,
      "following_count": 218,
      "statuses_count": 727,
      "emojis": [],
      "fields": []
    },
    "media_attachments": [{
      "id": "7344872",
      "type": "video",
      "url": "https://files.mastodon.social/media_attachments/files/007/344/872/original/e881b390a3a0264a.mp4",
      "preview_url": "https://files.mastodon.social/media_attachments/files/007/344/872/small/e881b390a3a0264a.png",
      "remote_url": "https://mastodon.bida.im/system/media_attachments/files/000/237/728/original/75c6aa57ed4dd524.mp4",
      "text_url": null,
      "meta": {
        "length": "0:00:56.85",
        "duration": 56.85,
        "fps": 30,
        "size": "400x296",
        "width": 400,
        "height": 296,
        "aspect": 1.3513513513513513,
        "audio_encode": "aac (LC) (mp4a / 0x6134706D)",
        "audio_bitrate": "48000 Hz",
        "audio_channels": "stereo",
        "original": {
          "width": 400,
          "height": 296,
          "frame_rate": "30/1",
          "duration": 56.853333,
          "bitrate": 270713
        },
        "small": {
          "width": 400,
          "height": 296,
          "size": "400x296",
          "aspect": 1.3513513513513513
        }
      },
      "description": "Moon fotage, speed up with tecno music"
    }],
    "mentions": [],
    "tags": [{
      "name": "rave",
      "url": "https://mastodon.social/tags/rave"
    }, {
      "name": "trip",
      "url": "https://mastodon.social/tags/trip"
    }, {
      "name": "moon",
      "url": "https://mastodon.social/tags/moon"
    }, {
      "name": "space",
      "url": "https://mastodon.social/tags/space"
    }],
    "emojis": []
  },
  "application": null,
  "account": {
    "id": "566645",
    "username": "nicobo",
    "acct": "nicobo",
    "display_name": "",
    "locked": false,
    "bot": false,
    "created_at": "2018-10-15T11:52:20.655Z",
    "note": "\u003cp\u003e\u003c/p\u003e",
    "url": "https://mastodon.social/@nicobo",
    "avatar": "https://files.mastodon.social/accounts/avatars/000/566/645/original/eeea1dc6689efdb8.png",
    "avatar_static": "https://files.mastodon.social/accounts/avatars/000/566/645/original/eeea1dc6689efdb8.png",
    "header": "https://files.mastodon.social/accounts/headers/000/566/645/original/770f053db95c3571.png",
    "header_static": "https://files.mastodon.social/accounts/headers/000/566/645/original/770f053db95c3571.png",
    "followers_count": 0,
    "following_count": 8,
    "statuses_count": 8,
    "emojis": [],
    "fields": [{
      "name": "site",
      "value": "\u003ca href=\"https://www.nicolabs.net\" rel=\"me nofollow noopener\" target=\"_blank\"\u003e\u003cspan class=\"invisible\"\u003ehttps://www.\u003c/span\u003e\u003cspan class=\"\"\u003enicolabs.net\u003c/span\u003e\u003cspan class=\"invisible\"\u003e\u003c/span\u003e\u003c/a\u003e",
      "verified_at": null
    }]
  },
  "media_attachments": [],
  "mentions": [],
  "tags": [],
  "emojis": []
}
nicobo commented 5 years ago

Well maybe I didn't get the way this widget is intended to handle medias... Did you actually meant to only link to boosted toots' media and embed only the current toot's media ?

Because the given example is a boost...