Youtube thingie

README.md

Youtube

It's a YouTube client.

Dependencies

• GNU Make (Or any version of make, really)
• wget or curl
• CoffeeScript

Installation

Just run:

make

This downloads and extracts the ExtJS library and compiles the coffee script. You can then view the app by opening youtube.html in any modern browser.

app.coffee

Ext.Loader.setConfig {enabled: true}
Ext.Loader.setPath 'Ext.ux', 'extjs-4.1.0/examples/ux'
Ext.require ['Ext.data.*','Ext.grid.*','Ext.ux.RowExpander','Ext.ux.PreviewPlugin','Ext.container.*']

defaultSearch = 'skateboarding dog'
searchUrl = -> "http://gdata.youtube.com/feeds/api/videos?v=2&alt=rss&q=#{this}"
watchUrl = -> "http://www.youtube.com/v/#{this}?version=3"
thumbUrl = -> "http://i.ytimg.com/vi/#{this}/default.jpg"

tc = (string) -> string[0].toUpperCase() + (string.substr 1)
withIndex = (index) -> (obj) ->
    obj.text = tc index
    obj.dataIndex = index
    obj

named = (name) -> {name: name}
convert = (id,fn) -> (obj) ->
    obj.convert = (data,record) -> fn.call record.get(id), record.get(id)
    obj
match = (regex) -> -> (this.match regex)[1]
lift1 = (fn,args...) -> -> fn this, args...
Ext.define 'Video', {
    extend: 'Ext.data.Model'
    fields: ['guid','title','link','author','pubDate','description',
        (convert 'description', lift1 Ext.util.Format.ellipsis, 240, true)(named 'shortdesc'),
        (convert 'pubDate', Ext.util.Format.date)(named 'date'),
        (convert 'guid', match /:([^:]+)$/)(named 'vid'),
        (convert 'vid', watchUrl)(named 'embed'),
        (convert 'vid', thumbUrl)(named 'thumbnail')]}

Ext.onReady ->
    store = new Ext.data.Store {
        autoLoad: true
        model: 'Video'
        proxy: {
            type: 'ajax'
            url: (searchUrl.call defaultSearch)
            reader: {
                type: 'xml'
                record: 'item'
                root: 'channel'}}}

    search = new Ext.form.field.Text {
        name: 'query'
        value: defaultSearch
        fieldLabel: 'Search'
        enableKeyEvents: true}

    grid = new Ext.grid.Panel {
        store: store
        plugins: [{
            ptype: 'rowexpander',
            selectRowOnExpand: true,
            rowBodyTpl: ['<span class="iframe">{embed}</span><p class="description">{description}</p>']}]
        tbar: (new Ext.toolbar.Toolbar {items: [search]})
        columns: [
            (withIndex 'title')({
                flex: 5
                renderer: (value,p,record) ->
                    "<img class=\"thumbnail\" src=\"#{record.data.thumbnail}\" />" +
                    "<h1 class=\"title\">#{value}</h1>" +
                    "<p class=\"shortdesc\">#{record.data.shortdesc}</p>" +
                    "<a class=\"permalink\" href=\"#{record.data.link}\">Watch on YouTube</a>"}),
            (withIndex 'author')({flex: 1}),
            (withIndex 'date')({flex: 1})]}

    # Only load the iframe when the user expands the row
    grid.view.on 'expandbody', (fullRow, record, row) ->
        span = row.querySelector 'span.iframe'
        if span
            video = span.innerHTML
            span.outerHTML =
                "<iframe class=\"video\" type=\"text/html\" allowfullscreen src=\"#{video}\" />" +
                "<p class=\"description\">#{record.data.description}</p>"

    # Search while typing
    search.on 'keyup', ->
        store.getProxy().url = searchUrl.call this.value
        store.load()

    # Full-page view
    new Ext.Viewport {
        layout: 'fit'
        items: [grid]}

Makefile

VERSION := 4.1.0
ZIPFILE := ext-$(VERSION)-gpl.zip

download := http://cdn.sencha.io/$(ZIPFILE)
downloader := $(shell which curl)
downloader ?= $(shell which wget)

COFFEE := $(shell which coffee)
UNZIP := $(shell which unzip)

.PHONY: all clean
all: app.js extjs-$(VERSION)
clean:
	-rm -rf extjs-$(VERSION)/ app.js $(ZIPFILE)

extjs-$(VERSION): ext-$(VERSION)-gpl.zip
ifneq ($(UNZIP),)
	$(UNZIP) $^
else
	$(error "Install unzip")
endif

ext-4.1.0-gpl.zip:
ifeq ($(notdir $(downloader)),curl)
	$(downloader) $(download) > $@
else
ifeq ($(notdir $(downloader)),wget)
	$(downloader) $(download) -O $@
else
	$(error "Get $(download)")
endif
endif

%.js: %.coffee
ifneq ($(COFFEE),)
	$(COFFEE) -p $^ > $@
else
	$(error "Install coffeescript")
endif

style.css

.x-grid-cell {
    vertical-align: top;
}

h1.title {
    font-size: 150%;
    margin: 0.5em 1em 1em 0;
    white-space: normal;
}

p.shortdesc {
    white-space: normal;
    margin: 0 1em 0.5em 0;
}

img.thumbnail {
    float: left;
    max-width: 120px;
    max-height: 90px;
    margin: 0.5em;
}

a.permalink {
    border: 1px solid #99BCE8;
    border-radius: 0.4em;
    background-color: #D3E1F1;
    padding: 0.3em;
    text-decoration: none;
    float: right;
}

a[href^=http]:after {
    content: '➚';
}

iframe.video {
    width: 100%;
    min-height: 480px;
    border: 0;
}

youtube.html

<!DOCTYPE html>
<html>
    <head>
        <title>Youtube</title>
        <link rel="stylesheet" type="text/css" href="extjs-4.1.0/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="text/javascript" src="extjs-4.1.0/ext-all-debug.js"></script>
        <script type="text/javascript" src="app.js"></script>
    </head>
    <body>

    </body>
</html>