Play animated images (GIFS) in Impress

Animated GIFs play in a loop both while editing a slide and during the slideshow. They are delivered the same way embedded videos are: the image is saved as a file in the jail and served over HTTP, and the browser plays it as an overlay on top of the document.

Problem that was solved

An animated GIF on a slide used to show only its first frame, a frozen picture, both while editing and in the slideshow. The server renders documents without a window or timers, so it paints only the first frame into the tiles and slide images, and the browser does not advance an animated image used as a drawing source. So the frames have to be produced in the browser.

How it works

Each slide reported by the engine carries a list of its animated GIFs. The engine writes every GIF to a temporary file, cached by object id and image checksum, and reused for the rest of the document’s life so editing and the slideshow share one copy. The server points each GIF entry at the “/cool/media” URL, the same endpoint used for embedded video. The browser downloads the image once and decodes its frames. Because the checksum is in the URL, replacing the picture behind a shape fetches the new image.

While editing, the browser watches the current slide and draws each GIF as an overlay over its shape, painting the frames in a loop and keeping the overlays in line as the user changes slides, zooms, or edits. It asks for the slide information on document load, so GIFs already in the file play without a prior edit or slideshow trip, and again whenever a GIF is added, moved, resized, replaced, or removed. The load request waits for an open connection, since during a reload it could otherwise start an endless reconnect. An edit is gathered by the drawing layer into a single change on drop, so the update fires once per finished edit.

Files invovled:

Browser:

  • browser/src/app/AnimatedGifManager.ts — watches the current slide and keeps the overlays in line with its GIFs.

  • browser/src/canvas/sections/AnimatedGifSection.ts — one overlay: position and looped painting of the frames.

  • browser/src/app/GifFrameSource.ts — downloads the image from its URL and decodes the frames.

Server:

  • wsd/ClientSession.cpp — rewrites each GIF entry to point at the media URL.

  • wsd/DocumentBroker.cpp — serves the GIF file over the media endpoint.

Engine (kit and core):

  • engine/sd/source/ui/unoidl/unomodel.cxx — lists a slide’s GIFs, saves each to a cached file, and signals a change when a GIF is edited.

  • engine/include/COKit/COKit.hxx — the change signal used for that push.

  • kit/ChildSession.cpp — rebuilds and resends the slide information on that signal.

Patches:

https://gerrit.collaboraoffice.com/c/online/+/6331 → Play animated GIFs in Impress and Draw, in slideshow

https://gerrit.collaboraoffice.com/c/online/+/8615/3 → Serve the gif resource over existing media endpoint

https://gerrit.collaboraoffice.com/c/online/+/8956 → Fix animated GIFs not playing on document load

Leave a Reply

We use cookies to help our website work and improve your experience.
Read our Privacy Policy for more details.

We use cookies

We use cookies to improve your experience on this website. You may choose which types of cookies to allow and change your preferences at any time. Disabling cookies may impact your experience on this website. You can learn more by viewing our Cookie Policy.