Clip.qml 36.4 KB
Newer Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*
 * Copyright (c) 2013-2016 Meltytech, LLC
 * Author: Dan Dennedy <dan@dennedy.org>
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */

19
import QtQuick 2.6
20
import QtQuick.Controls 2.2
21
import Kdenlive.Controls 1.0
22
23
import QtQml.Models 2.2
import QtQuick.Window 2.2
24
import 'Timeline.js' as Logic
25
import com.enums 1.0
26
27
28

Rectangle {
    id: clipRoot
29
    property real timeScale: 1.0
30
31
32
    property string clipName: ''
    property string clipResource: ''
    property string mltService: ''
33
    property string effectNames
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
34
    property int modelStart
35
    property real scrollX: 0
36
37
38
    property int inPoint: 0
    property int outPoint: 0
    property int clipDuration: 0
39
    property int maxDuration: 0
40
    property bool isAudio: false
41
    property int audioChannels
42
    property bool showKeyframes: false
43
    property bool isGrabbed: false
44
    property bool grouped: false
45
    property var markers
46
    property var keyframeModel
47
48
    property int clipStatus: 0
    property int itemType: 0
49
50
    property int fadeIn: 0
    property int fadeOut: 0
51
    property int binId: 0
52
    property int positionOffset: 0
53
    property var parentTrack
54
55
    property int trackIndex //Index in track repeater
    property int clipId     //Id of the clip in the model
56
57
58
    property int trackId: -1 // Id of the parent track in the model
    property int fakeTid: -1
    property int fakePosition: 0
59
    property int originalTrackId: -1
60
    property int originalX: x
61
62
    property int originalDuration: clipDuration
    property int lastValidDuration: clipDuration
63
    property int draggedX: x
64
    property bool selected: false
65
    property bool isLocked: parentTrack && parentTrack.isLocked == true
66
    property bool hasAudio
67
68
    property bool canBeAudio
    property bool canBeVideo
69
    property double speed: 1.0
70
    property color borderColor: 'black'
71
    property bool forceReloadThumb
72
    property bool isComposition: false
73
    property var groupTrimData
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
74
    width : clipDuration * timeScale;
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
75
    opacity: dragProxyArea.drag.active && dragProxy.draggedItem == clipId ? 0.8 : 1.0
76

77
78
    signal trimmingIn(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedIn(var clip, bool shiftTrim, bool controlTrim)
79
    signal initGroupTrim(var clip)
80
81
    signal trimmingOut(var clip, real newDuration, var mouse, bool shiftTrim, bool controlTrim)
    signal trimmedOut(var clip, bool shiftTrim, bool controlTrim)
82

83
84
    onIsGrabbedChanged: {
        if (clipRoot.isGrabbed) {
85
            grabItem()
86
87
        } else {
            mouseArea.focus = false
88
89
90
        }
    }

91
92
93
94
95
    function grabItem() {
        clipRoot.forceActiveFocus()
        mouseArea.focus = true
    }

96
97
    function clearAndMove(offset) {
        controller.requestClearSelection()
98
99
        controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true)
        controller.requestAddToSelection(clipRoot.clipId)
100
101
    }

102
    onClipResourceChanged: {
103
        if (itemType == ProducerType.Color) {
104
            color: Qt.darker(getColor(), 1.5)
105
106
        }
    }
107
    ToolTip {
108
        visible: mouseArea.containsMouse && !dragProxyArea.pressed
109
110
111
112
113
114
115
116
        delay: 1000
        timeout: 5000
        background: Rectangle {
            color: activePalette.alternateBase
            border.color: activePalette.light
        }
        contentItem: Label {
            color: activePalette.text
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
117
            font.pointSize: root.fontUnit
118
            text: label.text + ' (' + timeline.simplifiedTC(clipRoot.inPoint) + '-' + timeline.simplifiedTC(clipRoot.outPoint) + ')'
119
120
121
        }
    }

122
123
    onKeyframeModelChanged: {
        console.log('keyframe model changed............')
124
125
126
        if (effectRow.keyframecanvas) {
            effectRow.keyframecanvas.requestPaint()
        }
127
128
    }

Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
129
130
    onClipDurationChanged: {
        width = clipDuration * timeScale;
131
132
133
134
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
            // Duration changed, we may need a different number of repeaters
            thumbsLoader.item.reload()
        }
135
    }
136

137
138
139
    onModelStartChanged: {
        x = modelStart * timeScale;
    }
140
141
142
143
144
    onFakePositionChanged: {
        x = fakePosition * timeScale;
    }
    onFakeTidChanged: {
        if (clipRoot.fakeTid > -1 && parentTrack) {
145
146
147
148
149
150
151
            if (clipRoot.parent != dragContainer) {
                var pos = clipRoot.mapToGlobal(clipRoot.x, clipRoot.y);
                clipRoot.parent = dragContainer
                pos = clipRoot.mapFromGlobal(pos.x, pos.y)
                clipRoot.x = pos.x
                clipRoot.y = pos.y
            }
152
153
            clipRoot.y = Logic.getTrackById(clipRoot.fakeTid).y
        }
154
155
    }

156
    onForceReloadThumbChanged: {
157
        // TODO: find a way to force reload of clip thumbs
158
159
160
        if (thumbsLoader.item) {
            thumbsLoader.item.reload()
        }
161
162
    }

163
    onTimeScaleChanged: {
164
        x = modelStart * timeScale;
165
        width = clipDuration * timeScale;
166
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
167
        if (parentTrack && parentTrack.isAudio && thumbsLoader.item) {
168
            thumbsLoader.item.reload();
169
        }
170
171
172
    }
    onScrollXChanged: {
        labelRect.x = scrollX > modelStart * timeScale ? scrollX - modelStart * timeScale : 0
173
174
    }

Vincent Pinon's avatar
Vincent Pinon committed
175
    border.color: selected ? root.selectionColor : grouped ? root.groupColor : borderColor
176
    border.width: isGrabbed ? 8 : 1.5
177

178
179
180
181
182
    function updateDrag() {
        var itemPos = mapToItem(tracksContainerArea, 0, 0, clipRoot.width, clipRoot.height)
        initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
    }

183
    function getColor() {
184
185
186
        if (clipStatus == ClipState.Disabled) {
            return 'grey'
        }
187
        if (itemType == ProducerType.Color) {
188
189
190
            var color = clipResource.substring(clipResource.length - 9)
            if (color[0] == '#') {
                return color
191
            }
192
            return '#' + color.substring(color.length - 8, color.length - 2)
193
        }
194
        return isAudio? root.audioColor : root.videoColor
195
196
    }

197
/*    function reparent(track) {
198
        console.log('TrackId: ',trackId)
199
200
        parent = track
        height = track.height
201
        parentTrack = track
202
        trackId = parentTrack.trackId
203
        console.log('Reparenting clip to Track: ', trackId)
204
        //generateWaveform()
205
    }
206
*/
207
208
    property bool variableThumbs: (isAudio || itemType == ProducerType.Color || mltService === '')
    property bool isImage: itemType == ProducerType.Image
209
    property string baseThumbPath: variableThumbs ? '' : 'image://thumbnail/' + binId + '/' + documentId + '/' + (isImage ? '#0' : '#')
210

211
    DropArea { //Drop area for clips
212
213
214
        anchors.fill: clipRoot
        keys: 'kdenlive/effect'
        property string dropData
215
        property string dropSource
216
        property int dropRow: -1
217
218
        onEntered: {
            dropData = drag.getDataAsString('kdenlive/effect')
219
            dropSource = drag.getDataAsString('kdenlive/effectsource')
220
221
222
        }
        onDropped: {
            console.log("Add effect: ", dropData)
223
            if (dropSource == '') {
224
225
226
                // drop from effects list
                controller.addClipEffect(clipRoot.clipId, dropData);
            } else {
227
                controller.copyClipEffect(clipRoot.clipId, dropSource);
228
            }
229
            dropSource = ''
230
            dropRow = -1
231
            drag.acceptProposedAction
232
233
        }
    }
234
235
    MouseArea {
        id: mouseArea
236
        enabled: root.activeTool === 0
237
        anchors.fill: clipRoot
238
        acceptedButtons: Qt.RightButton
239
        hoverEnabled: root.activeTool === 0
240
        cursorShape: (trimInMouseArea.drag.active || trimOutMouseArea.drag.active)? Qt.SizeHorCursor : dragProxyArea.cursorShape
241
        onPressed: {
242
            root.autoScrolling = false
243
            if (mouse.button == Qt.RightButton) {
244
                if (timeline.selection.indexOf(clipRoot.clipId) == -1) {
245
                    controller.requestAddToSelection(clipRoot.clipId, true)
246
247
248
                }
                clipMenu.clipId = clipRoot.clipId
                clipMenu.clipStatus = clipRoot.clipStatus
249
                clipMenu.clipFrame = Math.round(mouse.x / timeline.scaleFactor)
250
251
252
253
254
                clipMenu.grouped = clipRoot.grouped
                clipMenu.trackId = clipRoot.trackId
                clipMenu.canBeAudio = clipRoot.canBeAudio
                clipMenu.canBeVideo = clipRoot.canBeVideo
                clipMenu.popup()
255
            }
256
        }
257
        Keys.onShortcutOverride: event.accepted = clipRoot.isGrabbed && (event.key === Qt.Key_Left || event.key === Qt.Key_Right || event.key === Qt.Key_Up || event.key === Qt.Key_Down || event.key === Qt.Key_Escape)
258
        Keys.onLeftPressed: {
259
260
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart - offset, true, true, true);
261
262
        }
        Keys.onRightPressed: {
263
264
            var offset = event.modifiers === Qt.ShiftModifier ? timeline.fps() : 1
            controller.requestClipMove(clipRoot.clipId, clipRoot.trackId, clipRoot.modelStart + offset, true, true, true);
265
        }
266
267
268
269
270
271
        Keys.onUpPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getNextTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
        Keys.onDownPressed: {
            controller.requestClipMove(clipRoot.clipId, controller.getPreviousTrackId(clipRoot.trackId), clipRoot.modelStart, true, true, true);
        }
272
273
        Keys.onEscapePressed: {
            timeline.grabCurrent()
274
            //focus = false
275
        }
276
        onPositionChanged: {
277
278
            var mapped = parentTrack.mapFromItem(clipRoot, mouse.x, mouse.y).x
            root.mousePosChanged(Math.round(mapped / timeline.scaleFactor))
279
        }
280
281
282
283
        onEntered: {
            var itemPos = mapToItem(tracksContainerArea, 0, 0, width, height)
            initDrag(clipRoot, itemPos, clipRoot.clipId, clipRoot.modelStart, clipRoot.trackId, false)
        }
284

285
286
        onExited: {
            endDrag()
287
        }
288
        onWheel: zoomByWheel(wheel)
289

290
291
        Item {
            // Thumbs container
292
            anchors.fill: parent
293
294
295
296
297
298
299
300
301
302
303
304
305
306
            anchors.leftMargin: 0
            anchors.rightMargin: 0
            anchors.topMargin: clipRoot.border.width
            anchors.bottomMargin: clipRoot.border.width
            clip: true
            Loader {
                id: thumbsLoader
                asynchronous: true
                visible: status == Loader.Ready
                anchors.fill: parent
                source: parentTrack.isAudio ? (timeline.showAudioThumbnails ? "ClipAudioThumbs.qml" : "") : itemType == ProducerType.Color ? "" : timeline.showThumbnails ? "ClipThumbs.qml" : ""
                onLoaded: {
                    item.reload()
                }
307
            }
308
        }
309

310
311
312
313
314
315
        Item {
            // Clipping container
            id: container
            anchors.fill: parent
            anchors.margins: 1.5
            clip: true
316

317
318
319
320
321
322
323
324
325
326
            Rectangle {
                // text background
                id: labelRect
                color: clipRoot.selected ? 'darkred' : '#66000000'
                width: label.width + 2
                height: label.height
                visible: clipRoot.width > width / 2
                Text {
                    id: label
                    text: clipName + (clipRoot.speed != 1.0 ? ' [' + Math.round(clipRoot.speed*100) + '%]': '')
327
                    font.pointSize: root.fontUnit
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
                    anchors {
                        top: labelRect.top
                        left: labelRect.left
                        topMargin: 1
                        leftMargin: 1
                    }
                    color: 'white'
                    style: Text.Outline
                    styleColor: 'black'
                }
            }
            Rectangle {
                // Offset info
                id: offsetRect
                color: 'darkgreen'
                width: offsetLabel.width + radius
                height: offsetLabel.height
                radius: height/3
                x: labelRect.width + 4
                visible: labelRect.visible && positionOffset != 0
                MouseArea {
                    id: offsetArea
                    hoverEnabled: true
                    cursorShape: Qt.PointingHandCursor
                    anchors.fill: parent
                    onClicked: {
                        clearAndMove(positionOffset)
                    }
                    ToolTip {
                        visible: offsetArea.containsMouse
                        delay: 1000
                        timeout: 5000
                        background: Rectangle {
                            color: activePalette.alternateBase
                            border.color: activePalette.light
                        }
                        contentItem: Label {
                            color: activePalette.text
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
366
                            font.pointSize: root.fontUnit
367
                            text: positionOffset < 0 ? i18n("Offset: -%1", timeline.simplifiedTC(-positionOffset)) : i18n("Offset: %1", timeline.simplifiedTC(positionOffset))
368
369
370
371
372
                        }
                    }
                    Text {
                        id: offsetLabel
                        text: positionOffset
373
                        font.pointSize: root.fontUnit
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            topMargin: 1
                            leftMargin: 1
                        }
                        color: 'white'
                        style: Text.Outline
                        styleColor: 'black'
                    }
                }
            }
            Rectangle {
                // effects
                id: effectsRect
                color: '#555555'
                width: effectLabel.width + 2
                height: effectLabel.height
                x: labelRect.x
                anchors.top: labelRect.bottom
                visible: labelRect.visible && clipRoot.effectNames != ''
                Text {
                    id: effectLabel
                    text: clipRoot.effectNames
397
                    font.pointSize: root.fontUnit
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
                    anchors {
                        top: effectsRect.top
                        left: effectsRect.left
                        topMargin: 1
                        leftMargin: 1
                        // + ((isAudio || !settings.timelineShowThumbnails) ? 0 : inThumbnail.width) + 1
                    }
                    color: 'white'
                    //style: Text.Outline
                    styleColor: 'black'
                }
            }

            Repeater {
                model: markers
                delegate:
                Item {
                    anchors.fill: parent
                    Rectangle {
                        id: markerBase
                        width: 1
                        height: parent.height
420
                        x: clipRoot.speed < 0 ? clipRoot.clipDuration * timeScale + (Math.round(model.frame / clipRoot.speed) - (clipRoot.maxDuration - clipRoot.outPoint)) * timeScale : (Math.round(model.frame / clipRoot.speed) - clipRoot.inPoint) * timeScale;
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
                        color: model.color
                    }
                    Rectangle {
                        visible: mlabel.visible
                        opacity: 0.7
                        x: markerBase.x
                        radius: 2
                        width: mlabel.width + 4
                        height: mlabel.height
                        anchors {
                            bottom: parent.verticalCenter
                        }
                        color: model.color
                        MouseArea {
                            z: 10
                            anchors.fill: parent
                            acceptedButtons: Qt.LeftButton
                            cursorShape: Qt.PointingHandCursor
                            hoverEnabled: true
440
                            onDoubleClicked: timeline.editMarker(clipRoot.clipId, model.frame)
441
                            onClicked: proxy.position = (clipRoot.x + markerBase.x) / timeline.scaleFactor
442
443
444
445
446
447
                        }
                    }
                    Text {
                        id: mlabel
                        visible: timeline.showMarkers && parent.width > width * 1.5
                        text: model.comment
448
                        font.pointSize: root.fontUnit
449
450
451
452
453
454
455
456
                        x: markerBase.x
                        anchors {
                            bottom: parent.verticalCenter
                            topMargin: 2
                            leftMargin: 2
                        }
                        color: 'white'
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
457
                }
458
459
460
461
462
463
464
465
466
467
            }

            KeyframeView {
                id: effectRow
                visible: clipRoot.showKeyframes && clipRoot.keyframeModel
                selected: clipRoot.selected
                inPoint: clipRoot.inPoint
                outPoint: clipRoot.outPoint
                masterObject: clipRoot
                kfrModel: clipRoot.keyframeModel
468
469
            }
        }
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501

        states: [
            State {
                name: 'locked'
                when: isLocked
                PropertyChanges {
                    target: clipRoot
                    color: root.lockedColor
                    opacity: 0.8
                    z: 0
                }
            },
            State {
                name: 'normal'
                when: clipRoot.selected === false
                PropertyChanges {
                    target: clipRoot
                    color: Qt.darker(getColor(), 1.5)
                    z: 0
                }
            },
            State {
                name: 'selected'
                when: clipRoot.selected === true
                PropertyChanges {
                    target: clipRoot
                    color: getColor()
                    z: 3
                }
            }
        ]

502
        Rectangle {
503
504
505
506
507
508
509
510
511
512
513
514
            id: compositionIn
            anchors.left: parent.left
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.leftMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
515
            enabled: !clipRoot.isAudio && dragProxy.draggedItem === clipRoot.clipId
516
            visible: clipRoot.width > 4 * width
517
            MouseArea {
518
519
                id: compInArea
                anchors.fill: parent
520
521
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
522
523
524
525
526
527
528
529
530
531
532
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
                }
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, 0)
                }
                onReleased: {
                    parent.opacity = 0
533
534
                }
                ToolTip {
535
                    visible: compInArea.containsMouse && !dragProxyArea.pressed
536
537
538
539
540
541
542
543
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
544
                        font.pointSize: root.fontUnit
Yuri Chornoivan's avatar
Yuri Chornoivan committed
545
                        text: i18n("Click to add composition")
546
547
548
549
                    }
                }
            }
        }
550
        Rectangle {
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
            id: compositionOut
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 2
            anchors.rightMargin: 4
            width: root.baseUnit * 1.2
            height: width
            radius: 2
            color: Qt.darker('mediumpurple')
            border.width: 2
            border.color: 'green'
            opacity: 0
            enabled: !clipRoot.isAudio  && dragProxy.draggedItem == clipRoot.clipId
            visible: clipRoot.width > 4 * width
            MouseArea {
                id: compOutArea
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
567
                anchors.fill: parent
568
569
570
571
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.opacity = 0.7
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
572
                }
573
574
575
                onExited: {
                    if (!pressed) {
                        parent.opacity = 0
576
                    }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
577
                }
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
                onPressed: {
                    timeline.addCompositionToClip('', clipRoot.clipId, clipRoot.clipDuration - 1)
                }
                onReleased: {
                    parent.opacity = 0
                }
                ToolTip {
                    visible: compOutArea.containsMouse && !dragProxyArea.pressed
                    delay: 1000
                    timeout: 5000
                    background: Rectangle {
                        color: activePalette.alternateBase
                        border.color: activePalette.light
                    }
                    contentItem: Label {
                        color: activePalette.text
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
594
                        font.pointSize: root.fontUnit
Yuri Chornoivan's avatar
Yuri Chornoivan committed
595
                        text: i18n("Click to add composition")
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
596
597
                    }
                }
598
599
            }
        }
600

601

602
603
604
605
606
607
608
609
610
        TimelineTriangle {
            id: fadeInTriangle
            fillColor: 'green'
            width: Math.min(clipRoot.fadeIn * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.left: parent.left
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
611
        }
612
613
        Rectangle {
            id: fadeInControl
614
615
            anchors.left: fadeInTriangle.right
            anchors.leftMargin: fadeInTriangle.width > root.baseUnit ? -root.baseUnit : 0
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
            anchors.top: fadeInTriangle.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#FF66FFFF'
            border.width: 2
            border.color: 'green'
            enabled: !isLocked && !dragProxy.isComposition
            opacity: 0
            visible : clipRoot.width > 3 * width
            Drag.active: fadeInMouseArea.drag.active
            MouseArea {
                id: fadeInMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                drag.axis: Drag.XAxis
                drag.smoothed: false
                property int startX
                property int startFadeIn
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
                    }
645
                }
646
                onPressed: {
647
                    root.autoScrolling = false
648
649
650
651
652
653
                    startX = Math.round(parent.x / timeScale)
                    startFadeIn = clipRoot.fadeIn
                    parent.anchors.left = undefined
                    parent.opacity = 1
                    fadeInTriangle.opacity = 0.5
                    // parentTrack.clipSelected(clipRoot, parentTrack) TODO
654
                }
655
                onReleased: {
656
                    root.autoScrolling = timeline.autoScroll
657
                    fadeInTriangle.opacity = 0.3
658
                    parent.opacity = 0
659
                    parent.anchors.left = fadeInTriangle.right
660
661
662
663
664
665
666
667
                    console.log('released fade: ', clipRoot.fadeIn)
                    timeline.adjustFade(clipRoot.clipId, 'fadein', clipRoot.fadeIn, startFadeIn)
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = Math.round(parent.x / timeScale) - startX
                        var duration = Math.max(0, startFadeIn + delta)
668
                        duration = Math.min(duration, clipRoot.clipDuration - 1)
669
670
671
                        if (duration != clipRoot.fadeIn) {
                            timeline.adjustFade(clipRoot.clipId, 'fadein', duration, -1)
                            // Show fade duration as time in a "bubble" help.
672
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
673
674
675
                            bubbleHelp.show(clipRoot.x, parentTrack.y + clipRoot.height, s)
                        }
                    }
676
                }
677
            }
678
679
680
681
682
683
684
685
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeInMouseArea.containsMouse && !fadeInMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
686
                }
687
688
689
690
691
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
692
693
694
695
                }
            }
        }

696
697
698
699
700
701
702
703
704
705
706
707
708
        TimelineTriangle {
            id: fadeOutCanvas
            fillColor: 'red'
            width: Math.min(clipRoot.fadeOut * timeScale, clipRoot.width)
            height: clipRoot.height - clipRoot.border.width * 2
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.margins: clipRoot.border.width
            opacity: 0.3
            transform: Scale { xScale: -1; origin.x: fadeOutCanvas.width / 2}
        }
        Rectangle {
            id: fadeOutControl
709
710
            anchors.right: fadeOutCanvas.left
            anchors.rightMargin: fadeOutCanvas.width > root.baseUnit ? -root.baseUnit : 0
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
            anchors.top: fadeOutCanvas.top
            anchors.topMargin: -10
            width: root.baseUnit * 2
            height: width
            radius: width / 2
            color: '#66FFFFFF'
            border.width: 2
            border.color: 'red'
            opacity: 0
            enabled: !isLocked && !dragProxy.isComposition
            Drag.active: fadeOutMouseArea.drag.active
            visible : clipRoot.width > 3 * width
            MouseArea {
                id: fadeOutMouseArea
                anchors.fill: parent
                hoverEnabled: true
                cursorShape: Qt.PointingHandCursor
                drag.target: parent
                drag.axis: Drag.XAxis
                drag.minimumX: -root.baseUnit
                drag.maximumX: container.width
                property int startX
                property int startFadeOut
                onEntered: parent.opacity = 0.7
                onExited: {
                    if (!pressed) {
                    parent.opacity = 0
738
                    }
739
                }
740
741
                drag.smoothed: false
                onPressed: {
742
                    root.autoScrolling = false
743
744
745
746
747
                    startX = Math.round(parent.x / timeScale)
                    startFadeOut = clipRoot.fadeOut
                    parent.anchors.right = undefined
                    parent.opacity = 1
                    fadeOutCanvas.opacity = 0.5
748
                }
749
750
751
                onReleased: {
                    fadeOutCanvas.opacity = 0.3
                    parent.opacity = 0
752
                    root.autoScrolling = timeline.autoScroll
753
                    parent.anchors.right = fadeOutCanvas.left
754
755
756
757
758
                    var duration = clipRoot.fadeOut
                    if (duration > 0) {
                        duration += 1
                    }
                    timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, startFadeOut)
759
760
761
762
763
764
765
766
767
768
                    bubbleHelp.hide()
                }
                onPositionChanged: {
                    if (mouse.buttons === Qt.LeftButton) {
                        var delta = startX - Math.round(parent.x / timeScale)
                        var duration = Math.max(0, startFadeOut + delta)
                        duration = Math.min(duration, clipRoot.clipDuration)
                        if (clipRoot.fadeOut != duration) {
                            timeline.adjustFade(clipRoot.clipId, 'fadeout', duration, -1)
                            // Show fade duration as time in a "bubble" help.
769
                            var s = timeline.simplifiedTC(Math.max(duration, 0))
770
771
                            bubbleHelp.show(clipRoot.x + clipRoot.width, parentTrack.y + clipRoot.height, s)
                        }
772
                    }
773
774
                }
            }
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
            SequentialAnimation on scale {
                loops: Animation.Infinite
                running: fadeOutMouseArea.containsMouse && !fadeOutMouseArea.pressed
                NumberAnimation {
                    from: 1.0
                    to: 0.7
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
                NumberAnimation {
                    from: 0.7
                    to: 1.0
                    duration: 250
                    easing.type: Easing.InOutQuad
                }
790
791
            }
        }
792
    }
793
794
795

    Rectangle {
        id: trimIn
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
796
        anchors.left: clipRoot.left
797
798
        anchors.leftMargin: 0
        height: parent.height
799
        enabled: !isLocked
800
        width: root.baseUnit / 2
801
802
803
804
        color: isAudio? 'green' : 'lawngreen'
        opacity: 0
        Drag.active: trimInMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
805
        visible: trimInMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
806

807
808
809
810
811
812
813
814
815
816
        ToolTip {
            visible: trimInMouseArea.containsMouse && !trimInMouseArea.pressed
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
817
                font.pointSize: root.fontUnit
818
819
820
821
                text: i18n("In:%1\nPosition:%2", timeline.simplifiedTC(clipRoot.inPoint),timeline.simplifiedTC(clipRoot.modelStart))
            }
        }

822
823
824
825
826
827
        MouseArea {
            id: trimInMouseArea
            anchors.fill: parent
            hoverEnabled: true
            drag.target: parent
            drag.axis: Drag.XAxis
828
            drag.smoothed: false
829
            property bool shiftTrim: false
830
            property bool controlTrim: false
831
            property bool sizeChanged: false
832
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
833
            onPressed: {
834
                root.autoScrolling = false
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
835
                clipRoot.originalX = clipRoot.x
836
                clipRoot.originalDuration = clipDuration
837
                parent.anchors.left = undefined
838
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
839
                controlTrim = mouse.modifiers & Qt.ControlModifier
840
841
842
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
843
                parent.opacity = 0
844
845
            }
            onReleased: {
846
                root.autoScrolling = timeline.autoScroll
847
                parent.anchors.left = clipRoot.left
848
                if (sizeChanged) {
849
                    clipRoot.trimmedIn(clipRoot, shiftTrim, controlTrim)
850
851
                    sizeChanged = false
                }
852
853
854
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
855
                    var delta = Math.round((trimIn.x) / timeScale)
856
                    if (delta !== 0) {
857
858
859
                        if (delta < -modelStart) {
                            delta = -modelStart
                        }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
860
                        var newDuration =  clipDuration - delta
861
                        sizeChanged = true
862
                        clipRoot.trimmingIn(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
863
                    }
864
865
                }
            }
866
            onEntered: {
867
868
869
                if (!pressed) {
                    parent.opacity = 0.5
                }
870
871
872
873
            }
            onExited: {
                parent.opacity = 0
            }
874
875
876
877
        }
    }
    Rectangle {
        id: trimOut
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
878
        anchors.right: clipRoot.right
879
880
        anchors.rightMargin: 0
        height: parent.height
881
        width: root.baseUnit / 2
882
883
        color: 'red'
        opacity: 0
884
        enabled: !isLocked
885
886
        Drag.active: trimOutMouseArea.drag.active
        Drag.proposedAction: Qt.MoveAction
887
        visible: trimOutMouseArea.pressed || (root.activeTool === 0 && !mouseArea.drag.active && clipRoot.width > 4 * width)
888

889
890
891
892
893
894
895
896
897
898
        ToolTip {
            visible: trimOutMouseArea.containsMouse && !trimOutMouseArea.pressed
            delay: 1000
            timeout: 5000
            background: Rectangle {
                color: activePalette.alternateBase
                border.color: activePalette.light
            }
            contentItem: Label {
                color: activePalette.text
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
899
                font.pointSize: root.fontUnit
900
901
902
                text: i18n("Out: ") + timeline.simplifiedTC(clipRoot.outPoint)
            }
        }
Jean-Baptiste Mardelle's avatar
Jean-Baptiste Mardelle committed
903

904
905
906
907
        MouseArea {
            id: trimOutMouseArea
            anchors.fill: parent
            hoverEnabled: true
908
            property bool shiftTrim: false
909
            property bool controlTrim: false
910
            property bool sizeChanged: false
911
            cursorShape: (containsMouse ? Qt.SizeHorCursor : Qt.ClosedHandCursor);
912
913
            drag.target: parent
            drag.axis: Drag.XAxis
914
            drag.smoothed: false
915
916

            onPressed: {
917
                root.autoScrolling = false
918
                clipRoot.originalDuration = clipDuration
919
                parent.anchors.right = undefined
920
                shiftTrim = mouse.modifiers & Qt.ShiftModifier
921
                controlTrim = mouse.modifiers & Qt.ControlModifier
922
923
924
                if (!shiftTrim && clipRoot.grouped) {
                    clipRoot.initGroupTrim(clipRoot)
                }
925
                parent.opacity = 0
926
927
            }
            onReleased: {
928
                root.autoScrolling = timeline.autoScroll
929
                parent.anchors.right = clipRoot.right
930
                if (sizeChanged) {
931
                    clipRoot.trimmedOut(clipRoot, shiftTrim, controlTrim)
932
933
                    sizeChanged = false
                }
934
935
936
937
            }
            onPositionChanged: {
                if (mouse.buttons === Qt.LeftButton) {
                    var newDuration = Math.round((parent.x + parent.width) / timeScale)
938
                    if (newDuration != clipDuration) {
939
                        sizeChanged = true
940
                        clipRoot.trimmingOut(clipRoot, newDuration, mouse, shiftTrim, controlTrim)
941
                    }
942
943
                }
            }
944
945
946
947
948
            onEntered: {
                if (!pressed) {
                    parent.opacity = 0.5
                }
            }
949
950
951
            onExited: parent.opacity = 0
        }
    }
952

953
        /*MenuItem {
954
            id: mergeItem
Yuri Chornoivan's avatar
Yuri Chornoivan committed
955
            text: i18n("Merge with next clip")
956
957
958
            onTriggered: timeline.mergeClipWithNext(trackIndex, index, false)
        }
        MenuItem {
Yuri Chornoivan's avatar
Yuri Chornoivan committed
959
            text: i18n("Rebuild Audio Waveform")
960
            onTriggered: timeline.remakeAudioLevels(trackIndex, index)
961
        }*/
962
        /*onPopupVisibleChanged: {
963
964
965
966
967
            if (visible && application.OS !== 'OS X' && __popupGeometry.height > 0) {
                // Try to fix menu running off screen. This only works intermittently.
                menu.__yOffset = Math.min(0, Screen.height - (__popupGeometry.y + __popupGeometry.height + 40))
                menu.__xOffset = Math.min(0, Screen.width - (__popupGeometry.x + __popupGeometry.width))
            }
968
        }*/
969
}