PonyMirrors/Pony.fm
1
0
Fork 0
mirror of https://github.com/Poniverse/Pony.fm.git synced 2024-11-28 15:47:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

#109: Open Graph and Twitter cards for tracks

Browse source
This commit is contained in:
Josef Citrine 2016-10-30 19:02:14 +00:00
parent 3fa85e9fe7
commit abc521bb2f
5 changed files with 67 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/Http/Controllers/TracksController.php
View file

@ -88,7 +88,7 @@ class TracksController extends Controller
return Redirect::action('TracksController@getTrack', [$id, $track->slug]);
}
return View::make('tracks.show');
return View::make('tracks.show', ['track' => $track]);
}
public function getEdit($id, $slug)

1
resources/assets/styles/content.less vendored
View file

@ -145,6 +145,7 @@
&.artist-details {
> header {
padding: 15px;
margin: -10px -10px 10px;
> img {
width: 150px;

2
resources/assets/styles/layout.less vendored
View file

@ -25,7 +25,7 @@ html, body {
html body {
height: 100%;
background: #444;
background: #fff;
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
padding: 0px !important;
overflow-x: hidden;

6
resources/views/shared/_layout.blade.php
View file

@ -19,13 +19,13 @@
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title ng-bind="title">Pony.fm</title>
<meta name="description" content="@{{ description }}" />
<title ng-bind="title">@yield('title')Pony.fm</title>
<meta name="description" content="@yield('description')" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="theme-color" content="#84528A" />
<link rel="manifest" href="/manifest.json">
<base href="/" />
@yield('metadata')
@yield('styles')
</head>
<body ng-controller="application" class="{{Auth::check() ? 'is-logged' : ''}}">

64
resources/views/tracks/show.blade.php
View file

@ -18,7 +18,65 @@
@extends('shared._app_layout')
@section('app_content')
<h1>Track Listing!</h1>
<p>This page should be what search engines see</p>
@section('title'){{ $track->title }} - {{ $track->user->display_name }} | @endsection
@section('description'){{ str_limit($track->description, $limit = 200, $end = '...') }}@endsection
@section('metadata')
<meta property="og:title" content="{{ $track->title }}" />
<meta property="og:type" content="music.song" />
<meta property="og:url" content="https://pony.fm/tracks/{{ $track->id }}-{{ $track->slug }}" />
<meta property="og:image" content="{{ $track->getCoverUrl(\Poniverse\Ponyfm\Models\Image::NORMAL) }}" />
<meta property="og:image:width" content="350" />
<meta property="og:image:height" content="350" />
<meta property="og:description" content="{{ str_limit($track->description, $limit = 200, $end = '...') }}">
<meta property="og:site_name" content="Pony.fm" />
<meta property="og:audio" content="{{ $track->getStreamUrl('MP3') }}" />
<meta property="og:audio:type" content="audio/mpeg" />
<meta property="music:duration" content="{{ round($track->duration) }}" />
<meta property="fb:admins" content="1165335382" />
<meta name="twitter:card" content="player" />
<meta name="twitter:site" content="@ponyfm" />
<meta name="twitter:title" content="{{ $track->title }}" />
<meta name="twitter:description" content="{{ str_limit($track->description, $limit = 200, $end = '...') }}" />
<meta name="twitter:image" content="{{ $track->getCoverUrl(\Poniverse\Ponyfm\Models\Image::NORMAL) }}" />
<meta name="twitter:player" content="https://pony.fm/t{{ $track->id }}/embed?twitter" />
<meta name="twitter:player:width" content="480" />
<meta name="twitter:player:height" content="130" />
<meta name="twitter:player:stream" content="{{ $track->getStreamUrl('MP3') }}" />
<meta name="twitter:player:stream:content_type" content="audio/mpeg" />
@endsection
@section('app_content')
<div class="resource-details track-details">
<header>
<div class="hidden-xs single-player">
<img src="{{ $track->getCoverUrl(\Poniverse\Ponyfm\Models\Image::THUMBNAIL) }}" style="opacity: 1;">
</div>
<h1 class="ng-binding">Boooring!</h1>
<h2>
by: <a ng-href="http://ponyfm-dev.poni/logicdev" class="ng-binding" href="http://ponyfm-dev.poni/logicdev">LogicDev</a>
</h2>
</header>
<div class="stretch-to-bottom details-columns">
<div class="right">
<img class="cover" src="{{ $track->getCoverUrl(\Poniverse\Ponyfm\Models\Image::NORMAL) }}"/>
<ul class="stats">
<li>Published: <strong>{!! Helpers::timestamp($track->published_at) !!}</strong></li>
<li>Views: <strong>{{ $track->view_count }}</strong></li>
<li>Plays: <strong>{{ $track->play_count }}</strong></li>
<li>Downloads: <strong>{{ $track->download_count }}</strong></li>
<li>Favourites: <strong>{{ $track->favourite_count }}</strong></li>
</ul>
</div>
<div class="left">
<div class="description">
<h2>Description</h2>
<p>{{ $track->description }}</p>
</div>
</div>
</div>
</div>
@endsection