Skip to content

Commit 8e88a78

Browse files
author
epriestley
committed
Support audio files with HTML5 <audio />
Summary: Ref T3887. Similar to how we render images with `<img />`, render audio with `<audio />` if possible. Test Plan: See screenshots. Reviewers: btrahan, chad Reviewed By: btrahan CC: aran Maniphest Tasks: T3887 Differential Revision: https://secure.phabricator.com/D7156
1 parent ec02ac1 commit 8e88a78

File tree

7 files changed

+144
-49
lines changed

7 files changed

+144
-49
lines changed

src/__celerity_resource_map__.php

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3358,7 +3358,7 @@
33583358
),
33593359
'phabricator-property-list-view-css' =>
33603360
array(
3361-
'uri' => '/res/3a0ffc53/rsrc/css/layout/phabricator-property-list-view.css',
3361+
'uri' => '/res/d0d42da3/rsrc/css/layout/phabricator-property-list-view.css',
33623362
'type' => 'css',
33633363
'requires' =>
33643364
array(
@@ -3367,7 +3367,7 @@
33673367
),
33683368
'phabricator-remarkup-css' =>
33693369
array(
3370-
'uri' => '/res/e0f773b1/rsrc/css/core/remarkup.css',
3370+
'uri' => '/res/974df8e6/rsrc/css/core/remarkup.css',
33713371
'type' => 'css',
33723372
'requires' =>
33733373
array(
@@ -4162,7 +4162,7 @@
41624162
), array(
41634163
'packages' =>
41644164
array(
4165-
'e9892921' =>
4165+
'f44a66c5' =>
41664166
array(
41674167
'name' => 'core.pkg.css',
41684168
'symbols' =>
@@ -4211,7 +4211,7 @@
42114211
41 => 'phabricator-tag-view-css',
42124212
42 => 'phui-list-view-css',
42134213
),
4214-
'uri' => '/res/pkg/e9892921/core.pkg.css',
4214+
'uri' => '/res/pkg/f44a66c5/core.pkg.css',
42154215
'type' => 'css',
42164216
),
42174217
'64eeda79' =>
@@ -4403,15 +4403,15 @@
44034403
),
44044404
'reverse' =>
44054405
array(
4406-
'aphront-dialog-view-css' => 'e9892921',
4407-
'aphront-error-view-css' => 'e9892921',
4408-
'aphront-list-filter-view-css' => 'e9892921',
4409-
'aphront-pager-view-css' => 'e9892921',
4410-
'aphront-panel-view-css' => 'e9892921',
4411-
'aphront-table-view-css' => 'e9892921',
4412-
'aphront-tokenizer-control-css' => 'e9892921',
4413-
'aphront-tooltip-css' => 'e9892921',
4414-
'aphront-typeahead-control-css' => 'e9892921',
4406+
'aphront-dialog-view-css' => 'f44a66c5',
4407+
'aphront-error-view-css' => 'f44a66c5',
4408+
'aphront-list-filter-view-css' => 'f44a66c5',
4409+
'aphront-pager-view-css' => 'f44a66c5',
4410+
'aphront-panel-view-css' => 'f44a66c5',
4411+
'aphront-table-view-css' => 'f44a66c5',
4412+
'aphront-tokenizer-control-css' => 'f44a66c5',
4413+
'aphront-tooltip-css' => 'f44a66c5',
4414+
'aphront-typeahead-control-css' => 'f44a66c5',
44154415
'differential-changeset-view-css' => '44bfe40c',
44164416
'differential-core-view-css' => '44bfe40c',
44174417
'differential-inline-comment-editor' => '5e9e5c4e',
@@ -4425,7 +4425,7 @@
44254425
'differential-table-of-contents-css' => '44bfe40c',
44264426
'diffusion-commit-view-css' => 'c8ce2d88',
44274427
'diffusion-icons-css' => 'c8ce2d88',
4428-
'global-drag-and-drop-css' => 'e9892921',
4428+
'global-drag-and-drop-css' => 'f44a66c5',
44294429
'inline-comment-summary-css' => '44bfe40c',
44304430
'javelin-aphlict' => '64eeda79',
44314431
'javelin-behavior' => '9564fa17',
@@ -4500,56 +4500,56 @@
45004500
'javelin-util' => '9564fa17',
45014501
'javelin-vector' => '9564fa17',
45024502
'javelin-workflow' => '9564fa17',
4503-
'lightbox-attachment-css' => 'e9892921',
4503+
'lightbox-attachment-css' => 'f44a66c5',
45044504
'maniphest-task-summary-css' => '49898640',
4505-
'phabricator-action-list-view-css' => 'e9892921',
4506-
'phabricator-application-launch-view-css' => 'e9892921',
4505+
'phabricator-action-list-view-css' => 'f44a66c5',
4506+
'phabricator-application-launch-view-css' => 'f44a66c5',
45074507
'phabricator-busy' => '64eeda79',
45084508
'phabricator-content-source-view-css' => '44bfe40c',
4509-
'phabricator-core-css' => 'e9892921',
4510-
'phabricator-crumbs-view-css' => 'e9892921',
4509+
'phabricator-core-css' => 'f44a66c5',
4510+
'phabricator-crumbs-view-css' => 'f44a66c5',
45114511
'phabricator-drag-and-drop-file-upload' => '5e9e5c4e',
45124512
'phabricator-dropdown-menu' => '64eeda79',
45134513
'phabricator-file-upload' => '64eeda79',
4514-
'phabricator-filetree-view-css' => 'e9892921',
4515-
'phabricator-flag-css' => 'e9892921',
4514+
'phabricator-filetree-view-css' => 'f44a66c5',
4515+
'phabricator-flag-css' => 'f44a66c5',
45164516
'phabricator-hovercard' => '64eeda79',
4517-
'phabricator-jump-nav' => 'e9892921',
4517+
'phabricator-jump-nav' => 'f44a66c5',
45184518
'phabricator-keyboard-shortcut' => '64eeda79',
45194519
'phabricator-keyboard-shortcut-manager' => '64eeda79',
4520-
'phabricator-main-menu-view' => 'e9892921',
4520+
'phabricator-main-menu-view' => 'f44a66c5',
45214521
'phabricator-menu-item' => '64eeda79',
4522-
'phabricator-nav-view-css' => 'e9892921',
4522+
'phabricator-nav-view-css' => 'f44a66c5',
45234523
'phabricator-notification' => '64eeda79',
4524-
'phabricator-notification-css' => 'e9892921',
4525-
'phabricator-notification-menu-css' => 'e9892921',
4524+
'phabricator-notification-css' => 'f44a66c5',
4525+
'phabricator-notification-menu-css' => 'f44a66c5',
45264526
'phabricator-object-selector-css' => '44bfe40c',
45274527
'phabricator-phtize' => '64eeda79',
45284528
'phabricator-prefab' => '64eeda79',
45294529
'phabricator-project-tag-css' => '49898640',
4530-
'phabricator-property-list-view-css' => 'e9892921',
4531-
'phabricator-remarkup-css' => 'e9892921',
4530+
'phabricator-property-list-view-css' => 'f44a66c5',
4531+
'phabricator-remarkup-css' => 'f44a66c5',
45324532
'phabricator-shaped-request' => '5e9e5c4e',
4533-
'phabricator-side-menu-view-css' => 'e9892921',
4534-
'phabricator-standard-page-view' => 'e9892921',
4535-
'phabricator-tag-view-css' => 'e9892921',
4533+
'phabricator-side-menu-view-css' => 'f44a66c5',
4534+
'phabricator-standard-page-view' => 'f44a66c5',
4535+
'phabricator-tag-view-css' => 'f44a66c5',
45364536
'phabricator-textareautils' => '64eeda79',
45374537
'phabricator-tooltip' => '64eeda79',
4538-
'phabricator-transaction-view-css' => 'e9892921',
4539-
'phabricator-zindex-css' => 'e9892921',
4540-
'phui-button-css' => 'e9892921',
4541-
'phui-form-css' => 'e9892921',
4542-
'phui-form-view-css' => 'e9892921',
4543-
'phui-header-view-css' => 'e9892921',
4544-
'phui-icon-view-css' => 'e9892921',
4545-
'phui-list-view-css' => 'e9892921',
4546-
'phui-object-item-list-view-css' => 'e9892921',
4547-
'phui-spacing-css' => 'e9892921',
4548-
'sprite-apps-large-css' => 'e9892921',
4549-
'sprite-gradient-css' => 'e9892921',
4550-
'sprite-icons-css' => 'e9892921',
4551-
'sprite-menu-css' => 'e9892921',
4552-
'sprite-status-css' => 'e9892921',
4553-
'syntax-highlighting-css' => 'e9892921',
4538+
'phabricator-transaction-view-css' => 'f44a66c5',
4539+
'phabricator-zindex-css' => 'f44a66c5',
4540+
'phui-button-css' => 'f44a66c5',
4541+
'phui-form-css' => 'f44a66c5',
4542+
'phui-form-view-css' => 'f44a66c5',
4543+
'phui-header-view-css' => 'f44a66c5',
4544+
'phui-icon-view-css' => 'f44a66c5',
4545+
'phui-list-view-css' => 'f44a66c5',
4546+
'phui-object-item-list-view-css' => 'f44a66c5',
4547+
'phui-spacing-css' => 'f44a66c5',
4548+
'sprite-apps-large-css' => 'f44a66c5',
4549+
'sprite-gradient-css' => 'f44a66c5',
4550+
'sprite-icons-css' => 'f44a66c5',
4551+
'sprite-menu-css' => 'f44a66c5',
4552+
'sprite-status-css' => 'f44a66c5',
4553+
'syntax-highlighting-css' => 'f44a66c5',
45544554
),
45554555
));

src/applications/files/config/PhabricatorFilesConfigOptions.php

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ public function getOptions() {
2929
'image/x-ico' => 'image/x-icon',
3030
'image/x-icon' => 'image/x-icon',
3131
'image/vnd.microsoft.icon' => 'image/x-icon',
32+
33+
'audio/x-wav' => 'audio/x-wav',
34+
'application/ogg' => 'application/ogg',
35+
'audio/mpeg' => 'audio/mpeg',
3236
);
3337

3438
$image_default = array(
@@ -41,6 +45,12 @@ public function getOptions() {
4145
'image/vnd.microsoft.icon' => true,
4246
);
4347

48+
$audio_default = array(
49+
'audio/x-wav' => true,
50+
'application/ogg' => true,
51+
'audio/mpeg' => true,
52+
);
53+
4454
// largely lifted from http://en.wikipedia.org/wiki/Internet_media_type
4555
$icon_default = array(
4656
// audio file icon
@@ -82,14 +92,20 @@ public function getOptions() {
8292
'browsers tend to freak out when viewing enormous binary files.'.
8393
"\n\n".
8494
'The keys in this map are vieweable MIME types; the values are '.
85-
'the MIME type sthey are delivered as when they are viewed in '.
95+
'the MIME types they are delivered as when they are viewed in '.
8696
'the browser.')),
8797
$this->newOption('files.image-mime-types', 'set', $image_default)
8898
->setSummary(pht('Configure which MIME types are images.'))
8999
->setDescription(
90100
pht(
91101
'List of MIME types which can be used as the `src` for an '.
92102
'`<img />` tag.')),
103+
$this->newOption('files.audio-mime-types', 'set', $audio_default)
104+
->setSummary(pht('Configure which MIME types are audio.'))
105+
->setDescription(
106+
pht(
107+
'List of MIME types which can be used to render an '.
108+
'`<audio />` tag.')),
93109
$this->newOption('files.icon-mime-types', 'wild', $icon_default)
94110
->setSummary(pht('Configure which MIME types map to which icons.'))
95111
->setDescription(

src/applications/files/controller/PhabricatorFileInfoController.php

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,20 @@ private function buildPropertyView(PhabricatorFile $file) {
217217
$image);
218218

219219
$view->addImageContent($linked_image);
220+
} else if ($file->isAudio()) {
221+
$audio = phutil_tag(
222+
'audio',
223+
array(
224+
'controls' => 'controls',
225+
'class' => 'phabricator-property-list-audio',
226+
),
227+
phutil_tag(
228+
'source',
229+
array(
230+
'src' => $file->getViewURI(),
231+
'type' => $file->getMimeType(),
232+
)));
233+
$view->addImageContent($audio);
220234
}
221235

222236
return $view;

src/applications/files/remarkup/PhabricatorRemarkupRuleEmbedFile.php

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ public function markupEmbedFile($matches) {
5757
$options['name'] = $file_name;
5858

5959
$is_viewable_image = $file->isViewableImage();
60+
$is_audio = $file->isAudio();
6061

6162
$attrs = array();
6263
if ($is_viewable_image) {
@@ -91,10 +92,20 @@ public function markupEmbedFile($matches) {
9192
$bundle['meta'] = array(
9293
'phid' => $file->getPHID(),
9394
'viewable' => $is_viewable_image,
95+
'audio' => $is_audio,
9496
'uri' => $file->getBestURI(),
9597
'dUri' => $file->getDownloadURI(),
9698
'name' => $options['name'],
99+
'mime' => $file->getMimeType(),
97100
);
101+
102+
if ($is_audio) {
103+
$bundle['meta'] += array(
104+
'autoplay' => idx($options, 'autoplay'),
105+
'loop' => idx($options, 'loop'),
106+
);
107+
}
108+
98109
$metadata[$phid][] = $bundle;
99110
$engine->setTextMetadata($metadata_key, $metadata);
100111

@@ -118,7 +129,10 @@ public function didMarkupText() {
118129
$options = $data['options'];
119130
$meta = $data['meta'];
120131

121-
if (!$meta['viewable'] || $options['layout'] == 'link') {
132+
$is_image = idx($meta, 'viewable');
133+
$is_audio = idx($meta, 'audio');
134+
135+
if ((!$is_image && !$is_audio) || $options['layout'] == 'link') {
122136
$link = id(new PhabricatorFileLinkView())
123137
->setFilePHID($meta['phid'])
124138
->setFileName($meta['name'])
@@ -130,6 +144,33 @@ public function didMarkupText() {
130144
continue;
131145
}
132146

147+
if ($is_audio) {
148+
if (idx($options, 'autoplay')) {
149+
$preload = 'auto';
150+
$autoplay = 'autoplay';
151+
} else {
152+
$preload = 'none';
153+
$autoplay = null;
154+
}
155+
156+
$link = phutil_tag(
157+
'audio',
158+
array(
159+
'controls' => 'controls',
160+
'preload' => $preload,
161+
'autoplay' => $autoplay,
162+
'loop' => idx($options, 'loop') ? 'loop' : null,
163+
),
164+
phutil_tag(
165+
'source',
166+
array(
167+
'src' => $meta['uri'],
168+
'type' => $meta['mime'],
169+
)));
170+
$engine->overwriteStoredText($data['token'], $link);
171+
continue;
172+
}
173+
133174
require_celerity_resource('lightbox-attachment-css');
134175
$img = phutil_tag('img', $data['attrs']);
135176

src/applications/files/storage/PhabricatorFile.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -564,6 +564,16 @@ public function isViewableImage() {
564564
return idx($mime_map, $mime_type);
565565
}
566566

567+
public function isAudio() {
568+
if (!$this->isViewableInBrowser()) {
569+
return false;
570+
}
571+
572+
$mime_map = PhabricatorEnv::getEnvConfig('files.audio-mime-types');
573+
$mime_type = $this->getMimeType();
574+
return idx($mime_map, $mime_type);
575+
}
576+
567577
public function isTransformableImage() {
568578

569579
// NOTE: The way the 'gd' extension works in PHP is that you can install it

webroot/rsrc/css/core/remarkup.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,13 @@
148148
max-height: 640px;
149149
}
150150

151+
.phabricator-remarkup audio {
152+
display: block;
153+
margin: 16px auto;
154+
min-width: 300px;
155+
width: 50%;
156+
}
157+
151158
.phabricator-remarkup-mention-exists {
152159
font-weight: bold;
153160
background: #e6f3ff;

webroot/rsrc/css/layout/phabricator-property-list-view.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,13 @@
115115
max-width: 95%;
116116
}
117117

118+
.phabricator-property-list-audio {
119+
display: block;
120+
margin: 16px auto;
121+
width: 50%;
122+
min-width: 300px;
123+
}
124+
118125
/* When tags appear in property lists, give them a little more vertical
119126
spacing. */
120127
.phabricator-property-list-view .phabricator-tag-view {

0 commit comments

Comments
 (0)