In questa sezione del tutorial analizzeremo alcune modifiche al prodotto originale che permettono la personalizzazione dei contenuti inseriti con ATGoogleVideo.

Personalizzare la vista della sezione videos.

Tra i vari templates che il prodotto installa in Plone (portal_skins/atgooglevideo_templates/) troviamo un template per la visualizzazione dell'anteprima dei contenuti video:

googlevideo_folder_summary_view

Nonostante questa vista non sia più presente nella versione attualmente in sviluppo di AtGoogleVideo, mi sembra un template interessante che permette una personalizzazione di buon effetto per la sezione video di Plone.

La vista in oggetto consente di modificare la visione di contenuti presenti nella scheda 'videos' (o di una qualisasi altra cartella), visualizzando l'anteprima dell'ultimo video inserito in Plone.

Per utilizzare la nuova vista è possibile utilizzare due strade: la prima consiste nell'aggiunge la nuova vista solamente al cercatore 'videos', la seconda è fare in modo che sia permesso rendere disponibile la nuova vista ad un determinato tipo di contenuto di Plone.

Attraverso la ZMI di Zope selezioniamo la voce videos, entriamo nella scheda properties e modifichiamo la proprietà layout impostandola a questo valore:

googlevideo_folder_summary_view

A questo punto torniamo a Plone e clicchiamo sulla scheda videos: la visualizzazione del contenuto della sezione è cambiata, l'ultimo video pubblicato viene visualizzato direttamente in questa pagina mentre i successivi sono elencati al fondo.

Per rendere selezionabile la nuova vista direttamente dal menu di Plone possiamo modificare le proprietà del content type cercatore (Smart Folder) dalla ZMI.

Entriamo nella sezione portal_types e clicchiamo sul contenuto che vogliamo modificare: Topics (Smart Folder). Nella scheda properties, già selezionata di default, troveremo la proprietà Available view methods a cui possiamo aggiungere una nuova riga contente il nome della vista googlevideo_folder_summary_view

Una volta tornati a Plone possiamo entrare nella sezione videos e selezionare la nuova vista di default dal menu vista.

La vista che abbiamo selezionato ha però un grosso problema, risolvibile con una piccola modifica ai templates originali di ATGoogleVideo: l'anteprima funziona solamente con i video di Google Video. Questa limitazione è piuttosto fastidiosa in quanto non permette di visualizzare i video contenuti in Youtube.

Con la versione 0.4 di ATGoogleVideo è stato inserito il supporto a Youtube attraverso l'uso di una macro dal nome googlevideo_macros che imposta un differente codice HTML a seconda della provenienza del video (la distinzione viene fatta attraverso la verifica del parametro docid che per Google Video è numerico).

Questa macro non è stata utilizzata però all'interno della vista da noi selezionata: è questo il motivo del non corretto funzionamento della vista.

Per ovviare al problema possiamo apporre alcune piccole modifiche al template originale del prodotto; la modifica può avvenire sia direttamente da filesystem (Products/ATGoogleVideo/skins/atgooglevideo_templates) sia attraverso la ZMI di Zope. In questo tutorial utilizzeremo la ZMI.

Entriamo nella sezione portal_skin dalla ZMI di Zope e clicchiamo su atgooglevideo_templates.

All'interno di questa cartella dovremo modificare i seguenti file:

• googlevideo_folder_summary_view
• googlevideo_macros

Selezioniamo il primo file e clicchiamo sul pulsante customize, ne verrà creata una copia all'interno della cartella custom in portal_skins.

L'unica modifica da apportare a questo file consiste nel permettere l'utilizzo della googlevideo_marcos che supporta la visualizzazione dei video Youtube.

Aggiungiamo il seguente codice nell'intestazione dell'HTML (dalla riga 14):

<metal:cssslot fill-slot="css_slot">
    <style type="text/css" media="screen"
           tal:content="string: @import url($portal_url/atgooglevideo.css);">
    </style>
</metal:cssslot>

Questo permetterà l'inserimento nella nostra vista del css utile alla visualizzazione del div contenente l'anteprima del video.

Successivamente sostituiamo l'intera sezione del file (dalla riga 75 alla 98):

<tal:first tal:condition="repeat/item/start"
   tal:define="video python:item.getObject();
       movie string:http://video.google.com/googleplayer.swf?docId=${video/docId};
         quality video/quality;
         FlashVars python:'playerMode=embedded%s' % test(video.autoPlay,'&amp;autoPlay=true','')">
    <h3 tal:content="video/Title">Video Title</h3>
    <p class="documentDescription" tal:content="video/Description">Video Description.</p>
    <object tal:attributes="data movie;"
           type="application/x-shockwave-flash" 
         data="http://video.google.com/googleplayer.swf?docId=1234567890123456789"
         width="400"
         height="326">
         <param tal:attributes="value movie" 
        name="movie"  
        value="http://video.google.com/googleplayer.swf?docId=1234567890123456789" />
         <param name="allowScriptAcess" value="sameDomain" />
         <param tal:attributes="value quality"
             name="quality" value="best" />
         <param name="bgcolor" value="#FFFFFF" />
         <param name="scale" value="noScale" />
         <param name="salign" value="TL" />
         <param tal:attributes="value FlashVars"
             name="FlashVars" value="playerMode=embedded" />
    </object>
</tal:first>

con:

<tal:first tal:condition="repeat/item/start"
     tal:define="video python:item.getObject();
     docId video/docId;
     quality video/quality;
     autoPlay video/autoPlay">
   <h3 tal:content="video/Title">Video Title</h3>
   <p class="documentDescription" tal:content="video/Description">Video Description.</p>
   <metal:video use-macro="context/googlevideo_macros/macros/video" />
</tal:first>

Una volta salvate le modifiche possiamo tornare alla direcotry atgooglevideo_templates per modificare l'altro file: googlevideo_macros.

Selezioniamo il file e clicchiamo sul pulsante customize per farne una copia modificabile nella cartella custom.

La macro prende le variabili necessarie alla visualizzazione dei video da context, ma funziona solo fino a quando visualizziamo direttamente il video dal portale.

Se ricerchiamo i video attraverso un cercatore, queste variabili non si trovano più nell'ambiente context e perciò dobbiamo modificare il contenuto della macro per tener conto di questa differenza.

In altre paole dobbiamo eliminare ogni riferimento a context all'interno del file e creare delle variabili locali ad hoc che vengano valorizzate correttamente a seconda di dove viene richiamata la macro.

Modifichiamo quindi il file in questo modo:

<html xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en"
      lang="en"
      i18n:domain="ATGoogleVideo">

<!-- more information about attributes in: http://www.adobe.com/go/tn_4150 -->
<body>
<metal:video metal:define-macro="video"
             tal:define="docId context/docId | docId;
                isGoogle python:docId[1:].isdigit();
                quality context/quality | quality;
                autoPlay context/autoPlay | autoPlay;">

<tal:google tal:define="movie string:http://video.google.com/googleplayer.swf?docId=${docId};
                        FlashVars python:'playerMode=embedded%s' % test(autoPlay,'&amp;autoPlay=true','');">
    <object tal:attributes="data movie;"
            type="application/x-shockwave-flash" 
            data="http://video.google.com/googleplayer.swf?docId=1234567890123456789"
            class="googlevideo-player"
            tal:condition="isGoogle">
        <param tal:attributes="value movie"
               name="movie" value="http://video.google.com/googleplayer.swf?docId=1234567890123456789" />
        <param tal:attributes="value quality"
               name="quality" value="best" />
        <param tal:attributes="value FlashVars"
               name="FlashVars" value="playerMode=embedded" />
        <param name="wmode" value="transparent" />
    </object>
</tal:google>

<tal:youtube tal:define="movie string:http://www.youtube.com/v/${docId};
                         FlashVars python:'playerMode=embedded%s' % test(autoPlay,'&amp;autoPlay=true','');">
    <object tal:attributes="data movie;"
            type="application/x-shockwave-flash"
            data="http://www.youtube.com/v/ABCDEFGHIJ"
            class="youtube-player"
            tal:condition="not:isGoogle">
        <param tal:attributes="value movie"
               name="movie" value="http://www.youtube.com/v/ABCDEFGHIJ" />
        <param tal:attributes="value quality"
               name="quality" value="best" />
        <param tal:attributes="value FlashVars"
               name="FlashVars" value="playerMode=embedded" />
        <param name="wmode" value="transparent" />
    </object>
</tal:youtube>

</metal:video>

</body>
</html>

Una volta salvate le modifiche, ritornando alla sezione video del nostro Plone, possiamo constatare che la vista, così modificata funzionerà anche con i video di Youtube.

Anteprime - thumbnail

Un'altra modifica piuttosto semplice riguarda l'utilizzo dei thumbnail dei video già presenti su Youtube invece di inserire un'ulteriore immagine dentro Plone.

Questa soluzione nasce dalla mia pigrizia nel ritagliare ogni volta un'immagine nuova per ogni video inserito; è infatti molto semplice utilizzare direttamente le immagini di Youtube piuttosto che creare una nuova anteprima ogni volta. Purtroppo non ho riscontrato la stessa semplicità utilizzando le anteprime generate da Google Video, ma chissà, un giorno potrà essere più facile e, in ogni caso, sarà sempre possibile inserire un thumbnail personalizzato per i nostri video.

Per ora la soluzione consiste nel modificare la vista utilizzata in precedenza per la sezione videos e creare un piccolo script in Python che selezioni l'anteprima.

All'interno del file googlevideo_folder_summary_view (circa a riga 94) bisogna sostituire il seguente tag:

<img src="/it/labs/documentazione/tutorial/atgooglevideo/personalizzazioni" alt=""
    tal:condition="item_object/image_thumb|nothing"
    tal:replace="structure python: item_object.tag(scale='thumb', css_class='tileImage')" />

con:

<img tal:define="thumb python:here.get_video_thumb(item_object)" 
    tal:condition="thumb" 
    tal:replace="structure thumb" />

Il nuovo tag verifica, attraverso lo script che creeremo più avanti, la presenza dell'anteprima permettendone poi la visualizzazione.

All'interno della directory custom creiamo ora un script Python a cui daremo il nome 'get_video_thumb'. Questo si occuperà della creazione del tag IMG

# verifico se ho già inserito un thumbnail in plone
if (item.getImage()):
    # se esiste creo il tag img direttamente
    return item.tag(scale='thumb', css_class='tileImage')
else:
    # trovo il parametro docId e il titolo del video
    video_id=getattr(item,'docId')
    video_title=getattr(item,'title')
    # se l'id non e' numerico vuol dire che è un video di youtube
    if (not video_id.isdigit()):
        # in questo caso creo il tag immagine corretto per prendere da youtube l'anteprima
        img="<img src="http://img.youtube.com/vi/%s/2.jpg" alt='%s' title='%s' class='tileImage' />" % (video_id, video_title, video_title)
        return img
    else:
        # se il video proviene da google video non posso avere lìanteprima
        return False

Aggiungiamo 'item' nel campo 'Parameter List' e salviamo il file.

Se tutto è andato a buon fine, possiamo tornare alla nostra sezione videos. Nel caso in cui non venga inserita alcuna immagine per i video presi da Youtube avremo comunque un anteprima dei filmati direttamente dal sito.

Modifiche alla portlet video recenti

A questo punto manca solamente una cosa per concludere la personalizzazione di ATGoogleVideo.

Dopo aver personalizzato la vista della sezione videos e aver trovato il modo di risparmiare tempo nell'immissione delle anteprime dei nostri video, non ci resta che modificare la portlet creata dal prodotto in modo che visualizzi non solo il link ai video ma anche l'anteprima.

Per fare ciò dobbiamo modificare un file contenuto nella solita directory (atgooglevideo_templates): portlet_recent_google_videos

Selezioniamo il file da modificare e clicchiamo sul pulsante customize.

Tra la riga 33 e la riga 47 troviamo il contenuto dei collegamenti ipertestuali della portlet che visualizza i cinque video più recenti.

Sostituiamo:

<div tal:attributes="class item_type_class">                
  <a href="/it/labs/documentazione/tutorial/atgooglevideo/personalizzazioni"
       tal:attributes="href string:${obj/getURL}/view;
          title obj/Description;
          class string:$item_wf_state_class visualIconPadding tile">
     <tal:title content="obj/pretty_title_or_id">
          New video published!
     </tal:title>
     <span class="portletItemDetails"
          tal:content="python:here.toLocalizedTime(obj.EffectiveDate)">11/09/2006</span>
  </a>
</div>

con:

<div>
  <a href="/it/labs/documentazione/tutorial/atgooglevideo/personalizzazioni"
       tal:attributes="href string:${obj/getURL}/view;
          title obj/Description;
          class string:$item_wf_state_class tile">
     <img tal:define="thumb python:here.get_video_thumb(obj.getObject())" 
           tal:condition="thumb" 
           tal:replace="structure thumb"
           tal:attributes="style string:float:none"
     />
     <tal:title content="obj/pretty_title_or_id">
           New video published!
     </tal:title>
  </a>
</div>

Una volta salvate le modifiche apportate avremo una portlet che riunisce gli ultimi video pubblicati attraverso la loro anteprima.

Potete trovare le modifiche al prodotto nel file allegato alla guida (Personalizzazioni ATGoogleVideo).

Possibili sviluppi

Youtube offre alcune potenti funzionalità per gli sviluppatori; all'indirizzo http://www.youtube.com/dev troviamo la documentazione necessaria per sviluppare nuove applicazioni integrate che sfruttano le potenzialità del xml.

Attraverso la registrazione di un developer id è possibile interrogare in differenti modi il database di Youtube, e in questo modo ricevere in risposta un file xml maneggiabile per ottenere le informazioni desiderate. E' possibile quindi ottenere liste complete dei filmati selezionati per autore, per tag, per playlist e così via.