File Viewers

Former Member — Tue, 04 Aug 2020 21:43:28 GMT

Current Revision posted to Developer Training by Former Member on 08/04/2020 21:43:28

File Viewers allow the platform to customize the display of uploaded files and Urls. The IFileViewer type defines which Urls or file extensions the viewer should handle and the output that should be displayed. Verint Community ships with a wide array of file viewers, including Video, Audio, Url, Office document, PDF, Youtube and source code.

[toc]

Why should i create a File Viewer?

Instead of providing a link to download the file, a file viewer can display the contents of the file inline. For example, instead of showing a hyperlink to a Youtube video, the Youtube file viewer displays that video inline and allows it to be played without leaving the community.

Creating a File Viewer

To add support for a file viewer, implement the IFileViewer plugin type (which is found in the Telligent.Evolution.Api.dll). The IFileViewer interface extends IPlugin to add support custom file viewers.

To begin, implement the SupportedUrlPattern, SupportedFileExtensions and DefaultOrderNumber properties. Our example file viewer will allow Vine embed Urls to be viewed in the community. Since we are not supporting uploaded files with this file viewer, the SupportedFileExtensions property returns an empty collection. The SupportedUrlPattern property uses a regular expression to limit the file viewer to Urls containing the vine.co domain. The DefaultOrderNumber defines the order in which file viewers are checked against the SupportedFileExtensions and SupportedUrlPattern properties. If two different file viewers were both capable of handling a file or Url, the one with the lower order number would take precedence.

public int DefaultOrderNumber 
{ 
    get { return 100; } 
}

public string SupportedUrlPattern
{
    get { return @"https?://vine\.co/"; }
}

public string[] SupportedFileExtensions 
{ 
    get { return new string[0]; } 
}

Next, the GetMediaType methods are implemented. There are two methods, one for Urls being viewed and the other for files. Our file viewer does not support files, so we can throw a FileViewerNotSupportedException to indicate that to the platform. The GetMediaType method that receives a Url will throw a FileViewerNotSupportedException when previewing the Url, the platform will handle the preview for the File Viewer. When viewing the method will return Video.

public FileViewerMediaType GetMediaType(ICentralizedFile file, IFileViewerOptions options)
{
    throw new FileViewerNotSupportedException();
}

public FileViewerMediaType GetMediaType(Uri url, IFileViewerOptions options)
{
    if (options.ViewType == FileViewerViewType.Preview)
        throw new FileViewerNotSupportedException();

    return FileViewerMediaType.Video;
}

Lastly, the Render methods are implemented. Again since we do not support viewing files in our example, this method will throw a FileViewerNotSupportedException. The Render method that receives a Url as a parameter, will have two code paths. Our sample does not provide a preview image specific to Vine, instead we can return a FileViewerNotSupportedException. The platform will provide a default image preview. When viewing the video, the method will return an IFrame with the vine Url that will display the vine video inline in the content.

public string Render(ICentralizedFile file, IFileViewerOptions options)
{
    throw new FileViewerNotSupportedException();
}

public string Render(Uri url, IFileViewerOptions options)
{
    var uiApi = Telligent.Evolution.Extensibility.Apis.Get<IUI>();

    if (options.ViewType == FileViewerViewType.Preview)
    {
        throw new FileViewerNotSupportedException();
    }
    else
    {
        var width = options.Width.HasValue ? options.Width.Value : 0;
        var height = options.Height.HasValue ? options.Height.Value : 0;
        return string.Format("<iframe src=\"{0}\" width=\"{1}\" height=\"{2}\" frameborder=\"0\" scrolling=\"no\" />"
            , Globals.EnsureHtmlEncoded(url.ToString()), width, height);
    }
}

Source Code

Once the completed plugin is enabled, vine.co embed Urls will now be displayed inline in your content. Here is the full class including the IPlugin implementation.

using System;
using System.Web;
using Telligent.DynamicConfiguration.Components;
using Telligent.Evolution.Components;
using Telligent.Evolution.Extensibility.Api.Version1;
using Telligent.Evolution.Extensibility.Storage.Version1;
using Telligent.Evolution.Extensibility.UI.Version1;
using Telligent.Evolution.Extensibility.Version1;

namespace Examples
{
    public class VineEmbedFileViewer : Telligent.Evolution.Extensibility.UI.Version1.IFileViewer
    {
        #region IPlugin Members
        public string Name {
            get { return "Vine File Viewer"; }
        }

        public string Description {
            get { return "Allows embedding of Vine videos"; }
        }
        
        public void Initialize()
        {
        }
        #endregion

        #region IFileViewer Members

        public int DefaultOrderNumber { get { return 100; } }

        public string SupportedUrlPattern
        {
            get { return @"http[s]?://vine\.co/"; }
        }
        public string[] SupportedFileExtensions { get { return new string[0]; } }

        public string Render(ICentralizedFile file, IFileViewerOptions options)
        {
            throw new FileViewerNotSupportedException();
        }

        public string Render(Uri url, IFileViewerOptions options)
        {
            var uiApi = Telligent.Evolution.Extensibility.Apis.Get<IUI>();

            if (options.ViewType == FileViewerViewType.Preview)
            {
                throw new FileViewerNotSupportedException();
            }
            else
            {
                var width = options.Width.HasValue ? options.Width.Value : 0;
                var height = options.Height.HasValue ? options.Height.Value : 0;
                return string.Format("<iframe src=\"{0}\" width=\"{1}\" height=\"{2}\" frameborder=\"0\" scrolling=\"no\" />"
                    , Globals.EnsureHtmlEncoded(url.ToString()), width, height);
            }
        }

        public FileViewerMediaType GetMediaType(ICentralizedFile file, IFileViewerOptions options)
        {
            throw new FileViewerNotSupportedException();
        }

        public FileViewerMediaType GetMediaType(Uri url, IFileViewerOptions options)
        {
            if (options.ViewType == FileViewerViewType.Preview)
                throw new FileViewerNotSupportedException();

            return FileViewerMediaType.Video;
        }

        #endregion

    }
}

Tags: IFileViewer, file viewer