Ardour Digital - Specialists in development, consultancy, and training for Telligent community and ASP.NET application development

Telligent Community provides File Viewers to aid rendering media files, such as images, videos, You Tube videos etc. This works well for post attachments, and you can use them to insert media using the WYSIWYG editor by entering:

There is no standard way of specifying a URL to control, or a content fragment to display media. The following code will create a Community Server control that can be used to render the appropriate viewer for a given URL. File viewers have been included since Community Server 2008, this code is for Telligent Community 5.6 but should be similar for older versions.

FileViewer.cs

using System;
using System.Web.UI;
using CommunityServer.Components;

namespace RhysG.Community.FileViewer.Controls
{
    public class FileViewer : CommunityServer.Controls.PreTemplatedWrappedContentBase
    {
        public virtual string MediaUrl
        {
            get;
            set;
        }

        public virtual int Width
        {
            get;
            set;
        }

        public virtual int Height 
        { 
            get; 
            set; 
        }

        protected override void BindDefaultContent(Control control, IDataItemContainer dataItemContainer)
        {
            if (!String.IsNullOrEmpty(MediaUrl))
            {
                string html = FileViewers.Render(new Uri(MediaUrl), FileViewType.View, Width, Height);

                control.Controls.Add(new LiteralControl(html));
            }
        }

        protected override bool AutomatedVisible
        {
            get
            {
                if (String.IsNullOrEmpty(MediaUrl))
                {
                    return false;
                }

                return base.AutomatedVisible;
            }
            set
            {
                base.AutomatedVisible = value;
            }
        }
    }
}

This can then be used to display any supported media file by specifying the Url, Width and Height, e.g.:

<RG:FileViewer runat="server" MediaUrl="http://www.youtube.com/watch?v=yeynP-4Dg9I" Width="300" Height="150" />

Which will embed a You Tube video onto the page.

This can be extended to get it’s value from a content fragment by overriding the control and altering as below:

ConfigurableContentFragmentMedia.cs

using System;
using CommunityServer.Components;
using CommunityServer.Controls;

namespace RhysG.Community.FileViewer.Controls
{
    public class ConfigurableContentFragmentMedia : FileViewer
    {
        public override object DataSource
        {
            get
            {
                return CSControlUtility.Instance().GetCurrent<ConfigurableContentFragmentBase>(this);
            }
            set
            {
            }
        }

        protected ConfigurableContentFragmentBase ContentFragment
        {
            get
            {
                if (DataSource is ConfigurableContentFragmentBase)
                {
                    ConfigurableContentFragmentBase fragment = DataSource as ConfigurableContentFragmentBase;

                    return fragment;
                }

                return null;
            }
        }

        public string MediaUrlProperty
        {
            get;
            set;
        }

        public string WidthProperty
        {
            get;
            set;
        }

        public string HeightProperty
        {
            get;
            set;
        }

        public override int Width
        {
            get
            {
                if (!String.IsNullOrEmpty(WidthProperty) && ContentFragment != null)
                {
                    return ContentFragment.GetIntValue(WidthProperty, base.Width);
                }

                return base.Width;
            }
            set
            {
                base.Width = value;
            }
        }

        public override int Height
        {
            get
            {
                if (!String.IsNullOrEmpty(HeightProperty) && ContentFragment != null)
                {
                    return ContentFragment.GetIntValue(HeightProperty, base.Height);
                }

                return base.Height;
            }
            set
            {
                base.Height = value;
            }
        }

        private const string _emptyUri = "http://NONE";

        public override string MediaUrl
        {
            get
            {
                if (ContentFragment == null || String.IsNullOrEmpty(MediaUrlProperty))
                {
                    return String.Empty;
                }

                Uri uri = ContentFragment.GetUrlValue(MediaUrlProperty, new Uri(_emptyUri));

                string url = uri.ToString();
                return url.Equals(_emptyUri) ? String.Empty : url;
            }
            set
            {
                throw new InvalidOperationException("Cannot set the MediaUrl");
            }
        }

        protected override bool AutomatedVisible
        {
            get
            {
                if (ContentFragment == null)
                {
                    return false;
                }

                return base.AutomatedVisible;
            }
            set
            {
                base.AutomatedVisible = value;
            }
        }
    }
}

Assuming the Content Fragment used has a URL property named mediaUrl, and two Int Properties mediaWidth and mediaHeight the following code can be used to render the specified media:

<RG:ConfigurableContentFragmentMedia MediaUrlProperty="mediaUrl" WidthProperty="mediaWidth" HeightProperty="mediaHeight" runat="server" />

Leave a Comment