Skip to content
Snippets Groups Projects
Commit bebcf135 authored by Andreas Koepke's avatar Andreas Koepke
Browse files

Add support for embedding player via Javascript

parent 637b9007
No related branches found
No related tags found
No related merge requests found
(function ($, Drupal, SC, drupalSettings) {
var initialized;
Drupal.behaviors.Soundcloud = {
attach: function(context) {
if (!initialized) {
initialized = true;
SC.initialize();
}
$.each(drupalSettings.soundcloudfield, function(index, settings) {
var trackUrl = settings.url;
var embedSettings = {
auto_play: settings.autoplay,
maxheight: settings.maxheight,
show_artwork: settings.showartwork,
show_playcount: settings.showplaycount,
color: settings.color
};
$('#' + settings.id, context).once('soundcloudfield').each(function() {
console.log(embedSettings);
SC.oEmbed(trackUrl, embedSettings).then(function(oEmbed){
var $markup = $('<div>' + oEmbed.html + '</div>');
$markup.find('iframe').height(settings.maxheight + 'px');
$('#' + settings.id, context).html($markup.html());
console.log($markup.html());
});
});
});
}
};
})(jQuery, Drupal, SC, drupalSettings);
soundcloud_sdk:
remote: https://developers.soundcloud.com/docs/api/sdks
version: 3.3.2
license:
name: MIT
url: https://github.com/soundcloud/soundcloud-javascript/blob/master/LICENSE.md
gpl-compatible: true
js:
https://connect.soundcloud.com/sdk/sdk-3.3.2.js: { type: external, minified: true }
soundcloudfield_init:
version: 1.x
js:
js/soundcloudfield.js: {}
dependencies:
- core/jquery
- core/drupalSettings
\ No newline at end of file
......@@ -11,3 +11,22 @@ define('SOUNDCLOUDFIELD_DEFAULT_HTML5_PLAYER_HEIGHT', 166);
define('SOUNDCLOUDFIELD_DEFAULT_HTML5_PLAYER_HEIGHT_SETS', 450);
// Usable sizes for visual player: 300, 450, 600.
define('SOUNDCLOUDFIELD_DEFAULT_VISUAL_PLAYER_HEIGHT', 450);
/**
* Implements hook_theme().
*/
function soundcloudfield_theme($existing, $type, $theme, $path) {
return [
'soundcloudfield_js_embed' => [
'variables' => [
'id' => '',
'url' => '',
'autoplay' => 'false',
'maxheight' => '450px',
'showartwork' => 'false',
'showplaycount' => 'false',
'color' => 'ff7700',
],
],
];
}
......@@ -109,8 +109,8 @@ class SoundCloudDefaultFormatter extends FormatterBase implements ContainerFacto
'#type' => 'select',
'#default_value' => $this->getSetting('soundcloud_player_type'),
'#options' => [
'classic' => t('Classic'),
'visual' => t('Visual Player (new)'),
'classic' => $this->t('Classic'),
'visual' => $this->t('Visual Player (new)'),
],
];
......@@ -152,9 +152,11 @@ class SoundCloudDefaultFormatter extends FormatterBase implements ContainerFacto
'#size' => 4,
'#default_value' => $this->getSetting('soundcloud_player_visual_height'),
'#options' => [
300 => t('300px'),
450 => t('450px'),
600 => t('600px'),
300 => $this->t('300px'),
400 => $this->t('400px'),
450 => $this->t('450px'),
500 => $this->t('500px'),
600 => $this->t('600px'),
],
'#states' => [
'visible' => [
......
<?php
namespace Drupal\soundcloudfield\Plugin\Field\FieldFormatter;
use Drupal\Core\Field\FieldItemListInterface;
use Drupal\Core\Field\FormatterBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Component\Utility\Html;
/**
* Plugin implementation of the 'soundcloud_js' formatter.
*
* @FieldFormatter(
* id = "soundcloud_js",
* module = "soundcloudfield",
* label = @Translation("Visual Player loaded via Javascript"),
* field_types = {
* "soundcloud"
* }
* )
*/
class SoundCloudJSFormatter extends FormatterBase {
/**
* {@inheritdoc}
*/
public static function defaultSettings() {
return [
'soundcloud_player_width' => SOUNDCLOUDFIELD_DEFAULT_WIDTH,
'soundcloud_player_height' => SOUNDCLOUDFIELD_DEFAULT_VISUAL_PLAYER_HEIGHT,
'soundcloud_player_height_sets' => SOUNDCLOUDFIELD_DEFAULT_VISUAL_PLAYER_HEIGHT,
'soundcloud_player_autoplay' => '',
'soundcloud_player_color' => 'ff7700',
'soundcloud_player_hiderelated' => '',
'soundcloud_player_showartwork' => '',
'soundcloud_player_showcomments' => TRUE,
'soundcloud_player_showplaycount' => '',
] + parent::defaultSettings();
}
/**
* {@inheritdoc}
*/
public function settingsForm(array $form, FormStateInterface $form_state) {
$elements = parent::settingsForm($form, $form_state);
$settings = $this->getSettings();
$elements['soundcloud_player_height'] = [
'#type' => 'select',
'#title' => $this->t('Height of the visual player'),
'#size' => 4,
'#default_value' => $settings['soundcloud_player_height'],
'#options' => [
300 => $this->t('300px'),
400 => $this->t('400px'),
450 => $this->t('450px'),
500 => $this->t('500px'),
600 => $this->t('600px'),
],
];
$elements['soundcloud_player_height_sets'] = [
'#type' => 'textfield',
'#title' => $this->t('Height for sets'),
'#size' => 4,
'#default_value' => $settings['soundcloud_player_height_sets'],
];
$elements['soundcloud_player_autoplay'] = [
'#type' => 'checkbox',
'#title' => $this->t('Play audio automatically when loaded (autoplay).'),
'#default_value' => $settings['soundcloud_player_autoplay'],
];
$elements['soundcloud_player_color'] = [
'#type' => 'textfield',
'#title' => $this->t('Player color.'),
'#default_value' => $settings['soundcloud_player_color'],
'#description' => $this->t('Player color in hexadecimal format. Default is ff7700. Turn on the jQuery Colorpicker module if available.'),
];
$elements['soundcloud_player_hiderelated'] = [
'#type' => 'checkbox',
'#title' => $this->t('Hide related tracks.'),
'#default_value' => $settings['soundcloud_player_hiderelated'],
];
$elements['soundcloud_player_showartwork'] = [
'#type' => 'checkbox',
'#title' => $this->t('Show artwork.'),
'#default_value' => $settings['soundcloud_player_showartwork'],
];
$elements['soundcloud_player_showplaycount'] = [
'#type' => 'checkbox',
'#title' => $this->t('Show play count.'),
'#default_value' => $settings['soundcloud_player_showplaycount'],
];
return $elements;
}
/**
* {@inheritdoc}
*/
public function settingsSummary() {
$summary = [];
$summary[] = $this->t('Displays the SoundCloud player.');
return $summary;
}
/**
* {@inheritdoc}
*/
public function viewElements(FieldItemListInterface $items, $langcode) {
$elements = [];
$settings = $this->getSettings();
$autoplay = $settings['soundcloud_player_autoplay'] ? 'true' : 'false';
$showplaycount = $settings['soundcloud_player_showplaycount'] ? 'true' : 'false';
$showartwork = $settings['soundcloud_player_showartwork'] ? 'true' : 'false';
$color = $settings['soundcloud_player_color'] ? $settings['soundcloud_player_color'] : 'ff7700';
$elements['#attached']['library'][] = 'soundcloudfield/soundcloud_sdk';
$elements['#attached']['library'][] = 'soundcloudfield/soundcloudfield_init';
foreach ($items as $delta => $item) {
$parsed_url = parse_url($item->url);
$split_path = explode('/', $parsed_url['path']);
$height = (!isset($split_path[2]) || $split_path[2] == 'sets') ? $settings['soundcloud_player_height_sets'] : $settings['soundcloud_player_height'];
$id = Html::cleanCssIdentifier($item->url);
$elements['#attached']['drupalSettings']['soundcloudfield'][] = [
'id' => $id,
'url' => $item->url,
'autoplay' => $autoplay,
'maxheight' => $height,
'showartwork' => $showartwork,
'showplaycount' => $showplaycount,
'color' => $color,
];
$elements[$delta] = [
'#theme' => 'soundcloudfield_js_embed',
'#id' => $id,
];
}
return $elements;
}
}
......@@ -19,9 +19,10 @@ use Drupal\Core\Url;
* "soundcloud"
* }
* )
*
* @todo Investigate using extends UriLinkFormatter.
*/
class SoundCloudLinkFormatter extends FormatterBase {
// @todo Investigate using extends UriLinkFormatter.
/**
* {@inheritdoc}
......
......@@ -5,7 +5,7 @@ namespace Drupal\soundcloudfield\Plugin\Field\FieldType;
use Drupal\Core\Field\FieldItemBase;
use Drupal\Core\Field\FieldDefinitionInterface;
use Drupal\Core\Field\FieldStorageDefinitionInterface;
use Drupal\Core\TypedData\DataDefinition; // investigate
use Drupal\Core\TypedData\DataDefinition;
/**
* Plugin implementation of the 'soundcloud' field type.
......
......@@ -42,7 +42,12 @@ class SoundCloudWidget extends WidgetBase {
'#title' => $this->t('SoundCloud URL'),
'#placeholder' => $this->getSetting('placeholder_url'),
'#default_value' => isset($item->url) ? $item->url : NULL,
'#element_validate' => [[get_called_class(), 'validateSoundCloudUriElement']],
'#element_validate' => [
[
get_called_class(),
'validateSoundCloudUriElement',
],
],
'#maxlength' => 2048,
'#size' => 120,
'#required' => $element['#required'],
......
<div class="soundcloudfield-js-embed-wrapper">
<div id="{{ id }}"></div>
</div>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment