An OpenStoriesFeed viewer. See it in action on muan.co.
Things yet to be supported:
feed._open_stories.previewfeed.items[]._open_stories.previewfeed.items[]._open_stories.content_warningfeed.items[]._open_stories.tracks: Changing tracks for videos
<!-- Include `OpenStoriesElement` -->
<script src="https://unpkg.com/[email protected]" type="module" defer></script>
<!-- Render `<open-stories>` -->
<open-stories src="./feed.json"></open-stories>This requires native <dialog> and Shadow DOM support. No polyfills included.
Style elements with ::part (MDN):
open-stories::part(button) is the selector for the <button> that opens the story modal. It would be good to style open-stories:not(:defined) the same way, to prevent style flashing as the script executes.
open-stories::part(dialog): The modal<dialog>.open-stories::part(loading-visual): The loading overlay.open-stories::part(error-visual): The resource loading error overlay.open-stories::part(story): The<img>or<video>element of your story. Use::cueto style video tracks, for example.open-stories::part(metadata): The<details>for metadata.open-stories::part(metadata-summary): The<summary>for expanding metadata.open-stories::part(metadata-content): The metadata content container.
Whatever you put inside <open-stories>HERE</open-stories> will replace the default button text "View Stories". (MDN)
src: Required. A OpenStoriesFeed URL.loading: Optional. Values:lazyoreager. Default toeager. When set tolazy, only the first story in the feed is loaded before user interaction.duration: Optional. Number in seconds. Default to5.show-metadata: Optional. Displayitems[]._open_stories.caption.is-highlight: Optional. View history does not get set.
.is-loading: Present when feed is being fetched..is-empty: Present when no stories found..is-read: Present when stories have all been viewed. This relies onlocalStroageand does not work cross-origin/cross-devices..is-paused: Present autoplay is paused.